jquery 当我点击锚时如何停止悬停?

5tmbdcev  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(194)
$(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>

我想停止悬停时点击锚。
别再盘旋了。但我用off(),仍然悬停。
我甚至使用了stop()remove(),但仍然不起作用。
点击锚时如何停止悬停?

ttp71kqs

ttp71kqs1#

你可以在每次点击a标签时添加一些类,然后设置一个条件来检查悬停的anchor是否没有使用hasClass()的类。

演示代码

$(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>
s3fp2yjn

s3fp2yjn2#

我的解决方案是使用JavaScript。这是一个例子。

$('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;
}

相关问题