当鼠标悬停在一个div上时，如何触发链接的多个悬停动作？

Question

我想在悬停在主 div 上时触发多个悬停效果。我无法弄清如何同时使所有三个链接上的线条动画化，以及是否只能使用 CSS 还是必须使用 JavaScript，并且我没有找到之前帖子的正确解决方案。这是代码：

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

- KongGeorg

Answer 1

我会简化您的代码，如下所示，并在父容器上应用悬停效果。

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; /*left:0 top:55%*/
  background-position: 0% 55%; /*left:0 top:55%*/
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; /*width:100% height:4px*/
  background-position: 100% 55%; /*right:0 top:55%*/
}

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

这里是 background-position 的另一种语法（更加直观）：

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; 
  background-position: left 0 top 55%; 
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; 
  background-position: right 0 top 55%; 
}

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

以下是简化版且代码量较少的另一种方式：

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) var(--p,0%) 55%/var(--p,0%) 4px no-repeat;
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  --p:100%;
}

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

- Temani Afif

---

干得好，你的努力值得一个+1！ - Shidersz

喜欢使用更少的代码，但是这个版本有点小bug。如果你没有足够的悬停时间完成动画，它会反弹回左边而不是向右移动。但还是谢谢 :) - KongGeorg

@KongGeorg 加快速度，以确保它能够完成 ;) - Temani Afif

Answer 2

你需要在CSS中将:hover添加到div而不是a元素。

这是用于选择

中的元素的选择器。

div a

这是用于 div 中悬停的 a 元素的选择器。

div a:hover

这是选中悬停在 div 中的 a 元素的选择器

 div:hover a

这应该可以解决问题。

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

- Krzysiek Dróżdż

Answer 3

你需要捕获具有类.right-project-headline的元素上的悬停事件，然后将样式应用于其中的<a>元素，就像这样：

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

完整示例：

.right-project-headline {
   border: 1px solid red;
}

.right-project-headline a {
    text-decoration: none;
    color: black;
    position: relative;
}

.right-project-headline a::before, .right-project-headline a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}

.right-project-headline a::before {
  left: 0;
}

.right-project-headline a::after {
  right: 0;
  transition: width 500ms ease;
}

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

- Shidersz