Stop Hover effect of an item using JQUERY

Question

I have some div elements and each of them have a hover effect applied by CSS. But I don't always want this hover effect; it should only activate under specific conditions.

Now, how can I disable those hover effects using jQuery when my conditions are satisfied? What is the code for disabling hover? I don't have access to CSS files.

Solution 1

Just use the jQuery hover instead of the CSS one.

E.g. instead of such CSS:

#Div1:hover { background-color: yellow; }

Have this jQuery:

$("#Div1").hover(function() {
    $(this).css("background-color", "yellow");
}, function() {
    $(this).css("background-color", "");
});

Same effect, and you control the JS code and can have conditions.
Live test case: http://jsfiddle.net/THXuc/

Solution 2

you can do this by using

<script>
$("someDiv").hover(function(event) {
//apply some conditions if yes
  event.preventDefault();
else
return true;
});
</script>

Hope this will work for you....

Thanks

Comments

[thecodeparadox]

Thanks mate. But I have no access to CSS files.

[ianace]

@abdullah, you dont neet to have access to css files, .css() appends whatever is written to your css

[Shadow The Kid Wizard]

Yep, what ian said - CSS files are not relevant for jQuery. :)