Question

我创建了一个字形列表，当您将鼠标悬停在每个字形上时，它会显示扩展文字。

我面临的问题是，如果文本很长，它会在css转换发生之前在glyphicon的容器上闪烁。

Here is a fiddle example (notice the second box on hover).

我尝试过转换并在转换完成后显示文本。

我的HTML：

<div class="myContainer">
  <div id="myNav">
    <ul class="subMenu">
      <li class="listItem"><a href="#">List Item 1</a></li>
      <li class="listItem"><a href="#">List Item 2 with long text</a></li>
    </ul>
  </div>
</div>

我的CSS：

.subMenu .listItem {
  clear:both;
  list-style: none;
  height:15px;
  width: 15px;
  color: transparent;
  cursor: pointer;
  float: right;
  background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 10px center;
  border: solid 1px #ccc;
  padding: 9px 12px 9px 10px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}


.subMenu .listItem:hover {
  width: 100%;
  color: #000;
  cursor: auto;
  background: #fff
}


.subMenu .listItem a {
  color: transparent;
}

.subMenu .listItem:hover a{
  color: #000;
}

Answer 1

您可以将overflow:hidden;放入.listItem并使用链接上的white-space:nowrap;强制该行不会中断。

new code fiddle

最终代码：

#myNav {
  width: 50%;
}

.subMenu .listItem {
  clear:both;
  list-style: none;
  height:15px;
  width: 15px;
  color: transparent;
  cursor: pointer;
  float: right;
  background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 10px center;
  border: solid 1px #ccc;
  padding: 9px 12px 9px 10px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  overflow: hidden;
}


.subMenu .listItem:hover {
  width: 100%;
  color: #000;
  cursor: auto;
  background: #fff
}


.subMenu .listItem a {
  color: transparent;
  white-space:nowrap;
}

.subMenu .listItem:hover a{
  color: #000;
}

希望这会有所帮助。 = d

CSS悬停幻灯片过早闪烁文字

1 个答案: