javascript - 将鼠标悬停在父 div 上以影响子元素后的伪元素。下划线动画

Question

目前我可以悬停在h1上，它会有下划线，但是我想知道如果我悬停在父div上，我可以激活h1的伪后元素吗？

我试图将线宽仅保留为 h1。我尝试过的其他方法将占据 div 的整个宽度。

因此，当鼠标悬停在 h2 或 h3 上时，下划线会在 h1 上激活。

这只能在 CSS 中实现还是我需要使用 Javascript？

.nav-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-underline:before, .nav-underline:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: 45%;
  margin-top: -0.5px;
  background: #000;

}

.nav-underline:hover {
    letter-spacing: 4px;
    transition: .35s;
}
.nav-underline:before {
  left: -2.5px;
}
.nav-underline:after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
   <div class="nav-underline"><h1>Test</h1></div>
   <h2>Description</h2>
   <h3>Detail</h3>
</a>

https://jsfiddle.net/jvo8wo65/

Answer 1

由于您希望父 a.imagereveal 上的悬停状态触发效果，而不是依赖于 .nav-underline 本身的悬停状态，您可以简单地替换此选择器的所有实例:

.nav-underline:hover

...有了这个:

.imagereveal:hover .nav-underline

附带说明一下，您应该对伪元素使用双冒号，即 ::after 而不是 :after... unless you really need backwards compatibility with IE8 and below .

请参阅下面的概念验证，或 fixed JSfiddle :

.nav-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-underline::before, .nav-underline::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: 45%;
  margin-top: -0.5px;
  background: #000;

}

.imagereveal:hover .nav-underline {
    letter-spacing: 4px;
    transition: .35s;
}
.nav-underline::before {
  left: -2.5px;
}
.nav-underline::after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.imagereveal:hover .nav-underline::before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.imagereveal:hover .nav-underline::after {
  background: transparent;
  width: 100%;
  transition: 0s;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
   <div class="nav-underline"><h1>Test</h1></div>
   <h2>Description</h2>
   <h3>Detail</h3>
</a>