更改父级悬停时的子样式，使用：after

Question

我有一个内部带有链接的按钮，以及所述链接的动画下划线。 Code used from here, (example).

为了确保下划线不是很大并且远低于文本，我将动画应用于文本本身。这个问题是悬停半径很小，我希望整个按钮能够触发动画。

这是我的css和html：

.menuButtonText {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
.menuButtonText:after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.menuButtonText:hover:after {
  width: 100%;
  background: #E0E0E0;
}

.menuButton {
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: red;
}

<div class="menuButton"><a class="menuButtonText">MenuButton</a>
</div>
<div class="menuButton"><a class="menuButtonText">MenuButton</a>
</div>
<div class="menuButton menuButtonSelected"><a class="menuButtonText">MenuButton</a>
</div>

“menuButton”类是父级，比文本占用的空间大得多，这是我想要的触发器，我似乎无法让其他解决方案起作用，而我假设那是因为“：后”。

Answer 1

这就是你要追求的？

http://jsfiddle.net/19mdzLdk/

我添加了这个css：

.menuButton:hover .menuButtonText:after {
   width: 100%;
  background: #E0E0E0;
}

现在在div悬停时，文字会加下划线。