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.

Answer 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/

Answer 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