gpt4 book ai didi

jquery - 更改 :hover with jQuery

转载 作者:太空宇宙 更新时间:2023-11-03 22:46:30 25 4
gpt4 key购买 nike

我有一个 <ul>显示一些 <li> 的标签悬停。它在 HTML 中运行良好.现在,我想用 jQuery 来改变它.我不想显示 <li> #two#three悬停。我试图用 e.preventDefault(); 来阻止默认行为但它不起作用。

如何更改 :hover使用 jQuery?换句话说,我希望 #two 和 #three 仅使用 jquery 隐藏在 hoover 上

我要在这里检查:https://jsfiddle.net/42jqt4pn/2/

$("#language").mouseenter(function(e) {
e.preventDefault();
});
#language #two,
#language #three {
display: none;
}
#language:hover #two,
#language:hover #three {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="language">
<li id="one"><a href="#">en</a>
</li>
<li id="two"><a href="#">ca</a>
</li>
<li id="three"><a href="#">fr</a>
</li>
</ul>

最佳答案

progressive enhancement. I try to make the basic when javascript is disabled and then make a better design when javascript is enabled

实现此目的的一种方法是在 body 上设置一个类属性,您使用 javaScript 删除。这样你就知道访问者是否启用了 JS 并且可以相应地设置它的样式。只需使用 .no-js 类名作为所有“no-js”样式的前缀。

//if the user has JS enabled, remove the no-js classname:
$("body").removeClass("no-js");
#language #two,
#language #three {
display: none;
}
/* the following rule is only applied when the no-js class is set on the body */
.no-js #language:hover #two,
.no-js #language:hover #three {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="no-js">
<ul id="language">
<li id="one"><a href="#">en</a>
</li>
<li id="two"><a href="#">ca</a>
</li>
<li id="three"><a href="#">fr</a>
</li>
</ul>
</body>

关于jquery - 更改 :hover with jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41699455/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com