进度条没有出现在应有的位置，悬停答案

【问题标题】：Progressbar doesn't appear where it should be, with hover进度条没有出现在应有的位置，悬停
【发布时间】：2017-04-30 13:19:47
【问题描述】：

我正在使用 LESS 制作一个简单的进度条（我刚刚开始）。

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

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

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

我不知道我做错了什么。

谢谢。

BR 阿利姆

【问题讨论】：

您可以将链接添加到您的笔。它不会嵌入，但人们将能够访问它，这消除了要求人们重新创建它的摩擦。
每次我把codepen链接放进去的时候，这个消息都会出现：codepen.io的链接必须附有代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。如需更多编辑帮助，请单击 [?] 工具栏图标。这就是我使用代码按钮的原因。
这是他的 Pen 的链接：codepen.io/mustafoski/pen/ybbVvJ/?editors=1100

标签： html css hover less mixins

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

感谢每一个人:)

【讨论】：