Question

我有一个菜单，当鼠标悬停在图标上时会出现标签：

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

您可以在Plunker演示中看到一个正常运行的示例。

但如果我使用：

* {
  box-sizing: border-box 
}

它停止工作。问题出在我的网站CSS我使用border-box。

有没有办法让border-box的CSS产生相同的菜单？

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.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;
  width:100%
}

a:hover span {
  display: inline-block;
  vertical-align:top;
  width:0;
}

a span {
  display: none;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <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>
    
  </body>

</html>

Answer 1

我建议这样做，请参阅内联评论。

a {
    white-space: nowrap; /*icon and text on the same line*/
    position: relative; /*menu stays on top of content area*/
}
a span {
    display: none;
}
a:hover span {
    display: inline-block;
    vertical-align: top;
}

并查看更新的完整代码段。

＆＃13;

* {
    box-sizing: border-box;
}
.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;
    white-space: nowrap; /*added*/
    position: relative; /*added*/
}
a:hover {
    background-color: black;
    color: white;
}
a span {
    display: none;
}
a:hover span {
    display: inline-block;
    vertical-align: top;
}

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<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>

＆＃13;

Answer 2

将您的导航更改为box-sizing: content-box，然后将其z-index: 1设为首页，添加white-space: nowrap，然后移除a:hover和{{{{}}的宽度1}}。这是一个完整的工作解决方案：

＆＃13;

a:hover span

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navigation a {
  position: relative;
  z-index: 1;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  white-space: nowrap;
}

.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;
  vertical-align:top;
}

a span {
  display: none;
}

＆＃13;

Answer 3

只需在a标记中应用此内容即可。您可以在所有元素之后使用border-box

a:hover {
  background-color: black;
  color: white;
  width:100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Answer 4

我认为以下内容应该有效：

* {
 box-sizing: inherit;
  }

Answer 5

您可以完成此操作并仍将pointer-events: none;保留在所有元素上。

See this Plunker.

删除box-sizing: border-box;和width上的a:hover。将a:hover span和white-space: nowrap;添加到position: relative;。

使菜单与box-sizing一起使用：border-box

5 个答案: