CSS:触发 标签中每个 的悬停

Question

我试图在链接中的 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？当我将鼠标悬停在图标上时效果很好，但当我将鼠标悬停在文本上时效果不佳。

感谢您的回答。

Answer 1

我建议定义 :hover parent 的状态<a>元素而不是 child <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>