我需要做带过渡的内联菜单。
我试图将一些示例重新编码到我的要求中,但我遇到了 a:hover 类的问题 - 可能是 js 类中的一些问题。
但我不知道如何在滚动到子菜单时在主链接(dropdbtn 类)下获得红色背景。
$(document).ready(function() {
console.log("ready!");
$(".dropdown-content").mouseenter(function() {
$(this).prev().addClass('href-hovered');
})
$(".dropdown-content").mouseleave(function() {
$(this).prev().removeClass('href-hovered');
})
});
.nav {
width: 1200px !important;
height: 50px;
padding-bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
}
.nav a.dropbtn {
display: block;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
}
.nav a.dropbtn:hover {
display: block;
//padding:20px 40px;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
background: red;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.dropdown {
float: left;
background: white;
position: relative;
width: 170px;
min-height: 50px;
}
.dropdown > a {
color: black;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown > a:hover {
color: black;
background: red;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown .dropdown-content {
position: absolute;
transform: translate3d(0, -100%, 0);
transition: transform .2s ease-in;
z-index: -1;
left: 0;
}
.dropdown:hover .dropdown-content {
transform: translate3d(0, 0, 0);
transition-duration: .4s;
transition-timing-function: ease-out;
z-index: 1;
}
.dropdown-content {
background: red;
list-style: none;
width: 170px;
white-space: nowrap;
}
.dropdown-content a {
display: block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
z-index: 100 !important;
}
.nav .red {
color: #ff6600;
font-family: 'webfont';
font: 1.8em;
}
.nav .green {
color: #00cccc;
font-family: 'webfont';
}
.nav a:hover .red {
color: white;
padding-top: 20px;
font-family: 'webfont';
}
.nav a:hover .green {
color: white;
font-family: 'webfont';
}
.nav a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a.dropbtn.href-hovered .red {
color: white;
padding-top: 20px;
z-index: 2;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a:hover .red,
a:hover .green {
color: white;
font-family: 'webfont';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul>
<li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>
<ul class="dropdown-content">
<li><a href="http://localhost/?page_id=19">Sub_nav</a>
</li>
<li><a href="http://localhost/?page_id=304">Sub_nav</a>
</li>
<li><a href="http://localhost/?page_id=340">Sub_nav</a>
</li>
<li><a href="http://localhost/?page_id=306">Sub_nav</a>
</li>
<li><a href="http://localhost/?page_id=60">Sub_nav</a>
</li>
</ul>
</li>
</ul>
<nav>
最佳答案
正如 Mihailo 所说,您的菜单有点困惑且过于复杂。但要达到你的要求,只需更改样式定义即可
nav a.dropbtn:hover
到
nav:hover a.dropbtn
当导航 block 本身悬停时应用规则。
关于javascript - CSS 过渡内联菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40578063/