CSS:last-child AND:将鼠标悬停在ul中的链接上 [英] CSS :last-child AND :hover on an a link in a ul
问题描述
我正在设置导航菜单的最后一个子元素,似乎可以使用以下代码来做到这一点:
I'm styling the last child of a navigation menu which I seem to be able to do fine with the following code:
.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>
定位到悬停的最后一个孩子时,麻烦就来了.我正在使用这个:
The trouble comes when I try and target the <a>
on the last child on hover. I'm using this:
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
但是它似乎为所有< a>
标记设置了样式,而不仅仅是最后一个子样式.我已经尝试过各种变体,例如: ul>
,但我似乎无法正常工作.
But it seems to style all of the <a>
tags and not just the last child. I've tried variations such as: ul > li a
but I can't seem to get it o work correctly.
我在这里有一个Codepen: https://codepen.io/shaun-taylor/pen/LXdGGN
I have a Codepen here: https://codepen.io/shaun-taylor/pen/LXdGGN
此链接的主要目标是,当您将鼠标悬停在顶部时,将顶层的最后一个链接变为红色-谢谢您的阅读!
The main goal being for this one is just to turn the last link on the top level only red when you hover on it I guess - Thnk you for reading!
推荐答案
您应该更改
.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>
这篇关于CSS:last-child AND:将鼠标悬停在ul中的链接上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!