html - 将鼠标悬停在 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>

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>

这是背景位置的另一种语法(更直观):

.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>