html - 进度条没有出现在它应该出现的位置，带有悬停

Question

我正在使用 LESS 开发一个简单的进度条(我刚开始)。

[Codepen] http://codepen.io/mustafoski/pen/ybbVvJ 

我不太确定问题出在哪里，但是如果您将鼠标悬停在空栏或 h2 上，您会看到该栏正在填满。您可以看到的问题是，栏位于占位符的顶部。

它应该是这样的:http://codepen.io/mustafoski/pen/VbpBEe(我不明白，为什么我可以毫无问题地发布这个url)

我不知道我做错了什么。

谢谢。

BR阿里木

Answer 1

经过一段时间的尝试，我想通了。代码没问题，只是悬停部分缺少一个类。

如果你要看我的笔，你会看到这个:

旧的:

.bar(@widthInPercent)
{
  position:relative;
  content:"";
  width:0px;
  height:35px;
  background-color: @green;
  margin-top:0px;
  margin-left:0px;
  margin:0px !important;
  transition: all 1s ease-in-out;

  &:hover
  {
    width:@widthInPercent;
  }
}

新:

.bar(@widthInPercent)
{
  position:relative;
  content:"";
  width:0px;
  height:35px;
  background-color: @green;
  margin-top:0px;
  margin-left:0px;
  margin:0px !important;
  transition: all 1s ease-in-out;

  &:hover .bar /*This Class was missing*/
  {
    width:@widthInPercent;
  }
}

谢谢大家:)