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

【问题标题】：Hover over parent div to affect pseudo after elements of child. Underline animation将鼠标悬停在父 div 上以影响子元素的伪之后。下划线动画
【发布时间】：2017-10-25 22:39:08
【问题描述】：

目前我可以将鼠标悬停在 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/

【问题讨论】：

我不明白你的问题：你已经将 :hover 伪类绑定到父 div，所以将鼠标悬停在父 div 上确实会触发删除线动画。
我想将鼠标悬停在类图像显示或 h2 或 h3 上并激活 h1 上的下划线/删除线。
那么就用.imagereveal:hover .nav-underline代替.nav-underline:hover。
你有没有尝试过我的建议；）jsfiddle.net/teddyrised/jvo8wo65/4
很高兴它有帮助 :) 将我的建议作为工作代码 sn-p 的答案发布。

标签： javascript jquery html css

【解决方案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>

【讨论】：

感谢格式化提示。让我对伪元素的工作原理有了更多了解。
@databot 当然。但是，如果您打算支持 IE8 及以下版本，请坚持使用单冒号 ;) stackoverflow.com/questions/10181729/…

【解决方案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);
}

【讨论】：