How to remove class hover

Question

Listen guys Im here again, I have a trouble and I donk know how to search for my problmen in the web (I searched for that like "remove hover" and I didnt find what I wanted).

I have a style like this one:

.myStyle li:hover
{
     background: #9999FF;
}

and I have this in my html

<ul class="myStyle">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>

and I have this script too

$('ul li').on('click', function() {
     $(this).prependTo(list.closest('ul'));
}

So now, its works perfectly, but the li moved conserves the color of the class (#9999FF) after click, and doesnt quit until I pass the mouse over there. I have tried to remove class with removeClass but it doesnt work, please help me.

Any ideas for my problem?

Thank for u time!

Show us a fiddle/demo. `li:hover` would only apply to mouse hovers over any `li` element. — helion3, Feb 05 '14 at 23:36
You're right Arun, its works but in my project doesnt work (it is a lot of code, that is the reason I put an example). Im using IE, I have to use that because of the users. — razielx4crazy, Feb 05 '14 at 23:52

score 0 · Accepted Answer · edited May 23 '17 at 10:25

No, you can't, but you can attach styles not to tags but to classes and on hover event you can delete/add the class.

In jQuery hover is a combination of mouseenter and mouseleave events, so you can bind a handler for a hover start:

CSS:

.hoverable {
    /* your styles */
}
.hoverable:hover {
    /* your styles you want not to attach */
}

HTML:

<ul>
    <li class="hoverable">Hover not makes effect</li>
    <li>Hover makes effect</li>
</ul>

Javascript:

var className = 'hoverable'; 
$('ul li').on('mouseenter', function(e) {
    $(this).removeClass(className); 
}).on('mouseleave', function(e) {
    $(this).addClass(className);
});

(jsfiddle is here)

So it's possibly can prevent the unwanted effect.

And, of course, instead of this you can just redefine styles and set all the unwanted styles to 'inherit' etc., it will be the better solution.

Also, there is a similar question on StackOverfow: Can I disable a CSS :hover effect via JavaScript?

score 0 · Answer 2 · answered Feb 05 '14 at 23:48

0

Its not :hover then, If its retaining the color after clicking, its :active,

Try resetting the :active color,

.myStyle li:active{
  color:#<put-previous-color-hex-value-here>;
}

answered Feb 05 '14 at 23:48

Nagendra Rao

7,016
5
54
92

score 0 · Answer 3 · answered Feb 05 '14 at 23:48

this seems to work: for testing sake, I changed "list" to ".myStyle". Change per your needs.

http://jsfiddle.net/EhBD4/

$(document).ready(function(){
  $('ul li').on('click', function() {
     $(this).prependTo($('.myStyle').closest('ul'));
     $(this).css("background-color", "transparent");
  })
})

How to remove class hover

3 Answers3