父div浮点干扰子div的宽度
父div浮点干扰子div的宽度
提问于 2011-08-31 01:44:35
我正在尝试做的是有一个非常简单的工具提示，隐藏/显示在悬停使用jQuery。
(jsFiddle demo of the problem)
要做到这一点，我所做的是在li的上放置一个div，它将有一个工具提示。这个div绝对位于每个li的顶部。工具提示div将包含不同长度的文本，因此我不能预先定义它的宽度。我只想让宽度根据文本的长度一直延伸。
我的问题是，当我浮动li时，div也被浮动(至少看起来是这样)，因此获得了被浮动li的宽度。工具提示现在变得与li的宽度一样窄，这是我不喜欢发生的。
这是HTML：
<ul id="images">
<li><img src="[some image]" /><div class="tooltip">Some text that is quite long.</div></li>
<li><div class="tooltip">Some text that is quite small.</div><img src="[some image]" /></li>
<li><img src="[some image]" /></li>
<li><img src="[some image]" /></li>
</ul>这是CSS：
#images li {
list-style: none;
margin-left: 10px;
position: relative;
}
.tooltip {
color: #FFF;
clear: both;
background: #000;
padding: 10px;
font: 11px Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
position: absolute;
top: -50px;
display: none;
border: 2px solid #999;
}我希望有人能帮我解决这个问题。
Stack Overflow用户
发布于 2011-08-31 02:51:17
我认为你需要改变一下你的方法！您可以在具有绝对位置的div中使用它的HTML内容，而不是使用与实际工具提示相同的div，并根据悬停对象的位置设置它的位置。
$('#images li').hover(function() {
$('#myTooltip').html($(this).find('.tooltip').html());
/* Here you need to set #myTooltip absolute position.
based on the position of $('this') or the mouse position
with an offset */
}, function() {
$('#myTooltip').hide();
});其中#myTooltip是在列表外部定义的具有绝对位置的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7247485
复制相关文章
相似问题
腾讯云开发者
