CSS悬停滑出闪存文本太早
CSS悬停滑出闪存文本太早
提问于 2017-12-05 13:40:18
我已经创建了一个图标列表，当您悬停在每个图标上时，它会显示展开的文本。
我面临的问题是，如果文本很长，在css转换发生之前，它会闪过图标的容器。
我试着玩转换，并在转换完成后让文本显示。
我的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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-05 13:55:31
您可以将overflow:hidden;放在.listItem中，并在链接上使用white-space:nowrap;强制行不中断。
最终代码：
#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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47655030
复制相关文章
相似问题
腾讯云开发者
