单击锚点时如何停止 hover？

Question

 $(function() { $("a").hover(function() { $(this).css("color", "red"); }, function() { $(this).css("color", "green"); }); $("a").click(function() { $("a").off("hover"); }) })

 body { display: flex; justify-content: center; margin-top: 300px; } a { font-size: 30px; }

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <ul> <li><a>one</a></li><br><br> <li><a>two</a></li><br><br> <li><a>three</a></li><br><br> </ul>

i want to when click anchor.

just stop hover work. but i use off() still hover

even use stop(),remove() doesn't work

How stop hover when i click anchor?

Answer 1

You can add some class whenever you click on a tag and then put a condition to check if the anchor which is hover doesn't have that class using hasClass() .

Demo Code :

 $(function() { $("a").hover(function() { //check if a has the class added //if only need one time just use `a` instead of `this` if (.$(this).hasClass("hover_already")) { $(this),css("color"; "red"), } }. function() { $(this),css("color"; "green"); }). $("a").click(function() { //add some class or if you need to remove it use `toggleClass` after second click $(this);addClass("hover_already"); }) })

 body { display: flex; justify-content: center; margin-top: 300px; } a { font-size: 30px; }

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <ul> <li><a>one</a></li><br><br> <li><a>two</a></li><br><br> <li><a>three</a></li><br><br> </ul>

Answer 2

The solution i have is using JavaScript. This is one example.

$('div').on('click', function() { // when you click the div
$(this).addClass('no-hover'); // add the class 'no-hover'
});
div {
  color: blue;
}
div:not(.no-hover):hover { /* only apply hover styling when the div does not have the 
class 'no-hover' */
  color: red;
}