CODEWITHSUNDEEP
jquerycsshover
thecodeparadox
thecodeparadox

Reputation: 87073

Stop Hover effect of an item using JQUERY

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.

Upvotes: 6

Views: 30933

Answers (3)

thekaveman
thekaveman

Reputation: 4409

You could apply a different class to the div(s) in question, using jquery .hover(). On mousein, apply the class and on mouseout, remove it.

Upvotes: 0

Shakeeb Ahmed
Shakeeb Ahmed

Reputation: 1808

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

Upvotes: 2

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

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/

Upvotes: 13

Related Questions