更改父级悬停时的子样式,使用:after

时间:2015-02-02 10:56:10

标签: html css

我有一个内部带有链接的按钮,以及所述链接的动画下划线。 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”类是父级,比文本占用的空间大得多,这是我想要的触发器,我似乎无法让其他解决方案起作用,而我假设那是因为“:后”。

1 个答案:

答案 0 :(得分:0)

这就是你要追求的?

http://jsfiddle.net/19mdzLdk/

我添加了这个css:

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

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