我可能遗漏了一些非常明显的东西,但我终究无法弄清楚。在列表图标悬停时,文本显示在“输出”li 中,应该与其余部分保持一致,只是它一直被向下推,我不明白为什么 完整代码和演示: http://jsfiddle.net/YbN8D/1/
<ul id="social8">
<li id="facebook" class="social8icon"></li>
<li id="raptr" class="social8icon"></li>
<li id="social8output"></li>
</ul>
*
$(document).ready(function()
{
$("#facebook").mouseenter(function() {
$("#social8output").append("Facebook");
});
$("#raptr").mouseenter(function() {
$("#social8output").append("Raptr");
});
$(".social8icon").mouseleave(function() {
$("#social8output").empty();
});
});
*
body {
font-family: 'Century Gothic';
font-size: '10px';
}
#social8 li {
display: inline-block;
list-style: none;
}
.social8icon {
background: #000;
width: 24px;
height: 24px;
}
#social8output {
text-align: center;
line-height: 24px;
height: 24px;
width: 120px;
background: #ff0000;
font-size: 8px;
}
最佳答案
将 vertical-align: top;
添加到 #social8 li 类
#social8 li {
display: inline-block;
vertical-align: top;
list-style: none;
}
关于jquery append 将内联 li 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21150886/