我正在为导航菜单的最后一个子项设置样式,我似乎可以使用以下代码来完成它:
.aston-menu-light ul > li:last-child {
border:2px solid blue;
border-radius: 50px;
padding:0 20px 0 20px;
}
.aston-menu-light ul > li > ul > li:last-child {
border:none !important;
padding:0 !important;
}
.aston-menu-light ul > li:last-child:hover {
background-color:#ffff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
当我尝试定位 <a>
时,麻烦来了在悬停的最后一个 child 上。我正在使用这个:
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
但它似乎为所有 <a>
设置了样式标签而不仅仅是最后一个 child 。我试过变体,例如:ul > li a
但我似乎无法让它正常工作。
我这里有一个 Codepen:https://codepen.io/shaun-taylor/pen/LXdGGN
这个的主要目标是当你将鼠标悬停在顶层的最后一个链接上时,我猜它只变成红色 - 感谢你的阅读!
最佳答案
你应该改变
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
到
.aston-menu-light>ul>li:last-child > a:hover {
color:red !important;
}
/* CSS Document */
a {
color: black;
}
nav {
margin: 50px 0;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
}
nav a {
display:block;
padding:0 10px;
color:#black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
.aston-menu-light ul > li:last-child {
border:2px solid blue;
border-radius: 50px;
padding:0 20px 0 20px;
}
.aston-menu-light ul > li > ul > li:last-child {
border:none !important;
padding:0 !important;
}
.aston-menu-light ul > li:last-child:hover {
background-color:#ffff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.aston-menu-light>ul>li:last-child > a:hover {
color:red !important;
}
<nav class="aston-menu-light">
<ul>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
关于html - CSS :last-child AND :hover on an a link in a ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53433146/