Stop Hover Effect of an Object Using JQUERY

Question

I have several div elements, and each of them has the hover effect applied by CSS. But I do not always need this freezing effect; it should be activated only under certain conditions.

Now, how can I turn off these hover effects using jQuery when my conditions are satisfied? What is the code to disable hover ? I do not have access to CSS files.

Answer 1

Just use jQuery hover instead of CSS.

eg. instead of such CSS:

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

This jQuery has:

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

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

Answer 2

you can do it using

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

Hope this works for you ....

thanks

Answer 3

You can apply another class to the div (s) in question using jquery .hover() . On mousein, apply the class and mouse click, delete it.