我正在尝试在下拉菜单中创建 li 悬停效果,如下面的链接。
http://pitch.select-themes.com/home-agency/
就像 li
背景颜色在悬停状态下从一个 li
移动到另一个 li
。
我试过以下方法
$(document).ready(function(){
$('.menu li').hover(function(){
$(this).children('ul').fadeIn(300);
},
function () {
$(this).children('ul').fadeOut(300);
});
});
*{
padding:0;
margin:0;
}
.menuPan{
background-color:#b3b3b3;
text-align:center;
padding:5px 0;
}
.menuPan ul li{
display:inline-block;
padding:0 12px 0 12px;
text-transform:uppercase;
border-right:solid 2px #fff;
font-weight:700;
font-size:12px;
position:relative;
z-index:999;
}
.menuPan ul li:last-child{
border-right:0;
}
.menuPan ul li a{
color:#fff;
display:block;
line-height:20px;
padding:5px 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration:none;
}
.menuPan ul li a:hover{
color:#d2d2d2;
}
.menuPan ul li.personalLink a:hover,
.menuPan ul li.personalLink.current_page_item a{
color:#c0f241;
}
.menuPan ul li.businessLink a:hover,
.menuPan ul li.businessLink.current_page_item a{
color:#0088ce;
}
.menuPan ul li.motorLink a:hover,
.menuPan ul li.motorLink.current_page_item a{
color:#7c367b;
}
.menuPan ul li ul{
position:absolute;
top:30px;
left:0;
background-color:#b3b3b3;
text-align:left;
display:none;
}
.menuPan ul li ul li{
border-right:0;
display:block;
font-weight:600;
border-bottom:solid 1px #c2c2c2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menuPan ul li ul li a{
display:block;
white-space:pre;
}
.menuPan ul li ul li:hover{
background-color:#fff;
background-color:#9f9f9f;
}
.menuPan ul li ul li:hover a{
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuPan">
<div class="container">
<ul class="menu" id="menu-mainmenu"><li class="personalLink"><a href="#">Link 1</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item"><a href="#">Sub Link One</a></li>
<li class="menu-item"><a href="#">Sub Link Two</a></li>
<li class="menu-item"><a href="#">Sub Link Three</a></li>
<li class="menu-item"><a href="#">Sub Link Four</a></li>
<li class="menu-item"><a href="#">Sub Link Five</a></li>
<li class="menu-item"><a href="#">Sub Link Six</a></li>
</ul>
</li>
<li class="businessLink"><a href="#">Link 2</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Sub Link Three</a></li>
</ul>
</li>
<li class="motorLink"><a href="#">Link 3</a></li>
</ul>
</div>
</div>
我还创建了一个 jsFiddle file
最佳答案
我是这样实现效果的:
$("li").hover(function() {
$(".follow").stop().animate({
"top": $(this).position().top
}, 200);
});
请注意,CSS z-index 很重要,其余 CSS 用于装饰。
关于jquery - 在 li hover 中移动背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36762366/