将鼠标悬停在父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 ...， 除非确实需要与IE8及更低版本的向后兼容性 。

请参阅下面的概念验证或固定的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> 

Answer 2

是的，您只需要将鼠标悬停在父元素上

.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{
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}