我正在尝试触发链接中 2 个 div 上的悬停状态。 请考虑以下代码:
.social-container {
list-style: none;
}
.social-container>li>a {
color: blue;
}
.social-container>li>a:hover {
color: red;
text-decoration: none;
}
.social-link {
display: flex;
text-align: center;
align-items: center;
}
.icon {
width: 48px;
height: 48px;
margin: 5px;
display: inline-block;
}
.icon-linkedin {
background-color: green;
}
.icon-linkedin:hover, .icon-linkedin.hovered {
background-color: yellow;
}
.icon-github {
background-color: black;
}
.icon-github:hover, .icon-github.hovered {
background-color: cyan;
}
<div>
<ul class="social-container">
<li>
<a href="#" class="social-link">
<div class="icon icon-linkedin social-li"></div>
<div>linkedin.com</div>
</a>
</li>
<li>
<a href="#" class="social-link">
<div class="icon icon-github social-li"></div>
<div>github.com</div>
</a>
</li>
</ul>
</div>
当悬停其中任何一个时,如何触发链接内的每个 div ? 当我将鼠标悬停在图标上时效果很好,但在将鼠标悬停在文本上时则效果不佳。
感谢您的回答。
最佳答案
我建议定义:hover
父级上的状态<a>
元素而不是子元素<div>
元素。
我改变了这些:
.icon-linkedin:hover
.icon-github:hover
致这些:
.social-link:hover .icon-linkedin
.social-link:hover .icon-github
功能示例:
.social-container {
list-style: none;
}
.social-link {
display: flex;
text-align: center;
align-items: center;
color: blue;
}
.icon {
width: 48px;
height: 48px;
margin: 5px;
display: inline-block;
}
.icon-linkedin {
background-color: green;
}
.icon-github {
background-color: black;
}
.social-link:hover {
color: red;
text-decoration: none;
}
.social-link:hover .icon-linkedin {
background-color: yellow;
}
.social-link:hover .icon-github {
background-color: cyan;
}
<div>
<ul class="social-container">
<li>
<a href="#" class="social-link">
<div class="icon icon-linkedin social-li"></div>
<div>linkedin.com</div>
</a>
</li>
<li>
<a href="#" class="social-link">
<div class="icon icon-github social-li"></div>
<div>github.com</div>
</a>
</li>
</ul>
</div>
关于CSS:触发 <a> 标记中每个 <div> 的悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45090917/