的悬停。
我正在尝试在链接中的 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？ 当我悬停在图标上时它工作正常，但当我悬停文本时则不行。
感谢您的回答。
我建议在父元素<a>而不是子<div>元素上定义:hover状态。
我已经更改了这些：
.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>