Question

我正在研究一个简单的LESS进度条（我刚开始）。

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

我不确定问题是什么，但是如果你将鼠标悬停在空栏或h2上，你会看到栏已经填满了。您可以看到的问题是，栏位于占位符之上。

它应该如下所示：http://codepen.io/mustafoski/pen/VbpBEe （我不明白，为什么我可以毫无问题地发布这个网址）

我不知道我做错了什么。

谢谢。

BR ALIM

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;
  }
}

每个人的Thx：）

悬停时，进度条不会出现在应有的位置

1 个答案: