$(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()也不起作用
单击锚点时如何停止悬停?
您可以在每次单击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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句