菜单项悬停动画所有其他项目，而不是第一个？
菜单项悬停动画所有其他项目，而不是第一个？
提问于 2019-07-02 08:11:29
使用jQuery或CSS或两者的组合制作菜单项悬停动画。
我需要菜单项的帮助。例如，鼠标悬停在其中一个菜单项上，所有其他菜单项都会获得悬停动画，但没有鼠标悬停的菜单项。
我有下面的CSS动画，我想与上述要求使用。
我也有jQuery代码和使用“文本装饰”，“行通过”的逻辑工作很好。但是直线式是非常差的CSS，我想结合下面的CSS和jQuery来实现上面的效果。
这是针对WordPress菜单项的。
jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
jQuery(this).siblings().stop().css("text-decoration", "line-through");
jQuery(this).parent().siblings().stop().css("text-decoration", "none");
}, function() { // Mouse out
jQuery(this).siblings().stop().css("text-decoration", "none");
jQuery(this).parent().siblings().stop().css("text-decoration", "none");
});.overlay-content ul li a:hover:after,
.overlay-content ul li a:focus:after,
.overlay-content ul li a:active:after {
width: 40%;
background: #000;
}
.overlay-content ul li a:after {
content: '';
position: absolute;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 2%;
margin-top: 3.2%;
background-color: transparent;
transition: .35s;
}<div class="menu-menu-container">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Contact</a> </li>
<li> <a href="#">Help</a> </li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我想结合CSS和jQuery来实现上面的悬停效果/动画。
回答 2
Stack Overflow用户
发布于 2019-07-02 09:42:49
我不会在jQuery中添加css样式，而是根据事件添加和删除类。它给了你更多的能力来使用CSS特性。像这样的东西，
jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
jQuery(this).addClass("hovered");
jQuery(this).siblings("li").addClass("notHovered")
}, function() { // Mouse out
jQuery(this).siblings().stop().removeClass("notHovered");
jQuery(this).removeClass("hovered")
});和CSS：
.overlay-content ul li a:hover:after, .overlay-content ul li a:focus:after, .overlay-content ul li a:active:after {
width: 40%;
background: #000;
}
.menu-menu-container ul li a:after {
content: '';
position: absolute;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 2%;
margin-top: 3.2%;
background-color: transparent;
transition: .35s;
}
.menu-menu-container{
width: 100%;
background-color: black;
padding: 0 7.5px;
box-shadow: 0 4px 4px rgba(0,0,0,0.5)
}
.menu-menu-container li{
display: inline-block;
list-style: none;
padding: 15px;
border-top: 3px solid transparent;
border-left: none;
border-right: none;
font-family: 'Poppins', sans-serif
}
.notHovered{
filter: blur(2px);
}
li.hovered{
border-top-color: white
}
.menu-menu-container a{
text-decoration: none;
color: white;
font-size: 1rem;
}
.menu-menu-container li, .menu-menu-container *{
transition: 1s;
}这是一个非常基本的codepen，说明了我的意思。这只是为了给你一个idea....Hope，这是有帮助的。
Stack Overflow用户
发布于 2019-07-03 06:30:52
您根本不需要任何JS！只需在UL悬停时设置样式，然后在每个A悬停时分别设置样式：
.menu-menu {
padding: 0;
}
.menu-menu a {
text-decoration: none;
text-align: center;
display: block;
/* Relative, we can now use absolute elements inside */
position: relative;
}
.menu-menu a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -2px;
width: 0%;
transform: translateX(-50%);
height: 3px;
background-color: #000;
transition: .35s;
}
.menu-menu:hover a:after {
width: 100%;
}
.menu-menu a:hover:after,
.menu-menu a:focus:after,
.menu-menu a:active:after {
width: 0%;
background: #000;
}<ul class="menu-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56843830
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号