Question

我正在创建一个带有图标的栏，其中包含内容：
http://plnkr.co/edit/g6bOXcskIHEWdwp7ZRRW?p=preview

当鼠标悬停在图标上时，我希望名称显示在图标前面和内容上。但是在图标下显示。

我该如何解决这个问题？

标记

<div class="wrapper">
  <div class="navigation">
    <ul>
      <li>
        <a href="#">
          <i class="fa fa-home"></i>
          <span>One</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-book"></i>
          <span>Two</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="content">
    This is the content</br>
    Span of icon should be over content when mouse is over
  </div>        
</div>

CSS

.wrapper {
  border: 1px solid red;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.navigation {
  float: left;
  width: 40px;
}  
.content {
  float: left;
  width: 200px;
}
ul { 
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  background-color: #d0d0d0;
  color: black;
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}
a:hover {
  background-color: black;
  color: white;
}
a:hover span {
  display: inline-block;
}
a span {
  display: none;
}

Answer 1

这是一个解决方案：

将width:100%添加到a:hover

a:hover {
  background-color: black;
  color: white;
  width: 100%;
}

并添加width:0＆amp; vertical-align:top（可选）到a:hover span

a:hover span {
  display: inline-block;
  vertical-align: top;
  width: 0;
}

<强> DEMO

Answer 2

你正在按下按钮的标题＆＃34;一个＆＃34;和＆＃34;两个＆＃34;在列表项下因此，它将图标放在列表项中，然后在。

下显示内容

尝试把它放在列表项目中，就像我在下面做的那样！

这应该可以解决您的问题并显示图标，然后显示图标的名称！如果你想要一些分离，只需在图标的标题上添加一点边距！希望这有用！

<div class="navigation">
  <ul>
     <li>
        <a href="#">
           <i class="fa fa-home"><span>One</span></i>
        </a>
     </li>
     <li>
        <a href="#">
           <i class="fa fa-book"><span>Two</span></i>
        </a>
     </li>
  </ul>
</div>

Answer 3

我已对您的代码进行了编辑，并为每行添加或删除了评论。我希望这是你的预期效果：

将您的链接CSS更改为：

a:hover {
  background-color: black;
  color: white;
  position: relative;    /* So the span's position: absolute; keeps relative to the icon */
}

将您的跨度CSS更改为：

a:hover span {
  /*display: inline-block;   Not needed */
  position: absolute;     /* Make the text able to float over icon */
  top:35%;                /* Place the text near the vertical-middle of the icon */
  left:100%;              /* Place the text outside the icon menu */
  padding-left:10px;      /* The spacing from the icon menu */
  color: #000;            /* So we can see it */
}

Answer 4

将以下内容添加到您的css文件

a:hover{
  width:50px;
  z-index:1001;
  position:relative;
}

显示标签（span）无鼠标悬停

4 个答案: