父div浮动干扰子div的宽度

发布于 2024-12-02 07:12:31 字数 1192 浏览 1 评论 0原文

我想做的是有一个非常简单的工具提示，可以使用 jQuery 在悬停时隐藏/显示。

为此，我所做的就是在 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;
}

我希望有人能帮助我解决这个问题。

原文

What I am trying to do is to have a very simple tooltip that hides/shows on hover using jQuery.

(jsFiddle demo of the problem)

To do this, what I did was to put a div on li's that will have a tooltip. This div is absolutely positioned on top of each li. The tooltip div will contain varying lengths of text so I cannot just pre-define its width. I just want the width to extend all the way depending on the text length.

My problem is that when I float the li, the div also gets floated (or so it seems) hence taking the width of the floated li. The tooltip now becomes as narrow as the width of the li, which I don't like to happen.

This is the 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>

This is the 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;
}

I hope someone would help me with this problem.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

允世 2024-12-09 07:12:31

您始终可以事先计算出准确的宽度。

例如，您在页面外部创建一个工具提示 div，例如

<div class="tooltip" id="calc"></div>

，

#calc{
  top:-100px;
  left:-100px;
}

如果添加以下 js，它将显示

$(".tooltip","#images").each(function(){
  $("#calc").text($(this).text());
  $(this).width($("#calc").width());
});

更新良好的小提琴这里

You can always calculate the exact width before.

For example, you create a tooltip div outside of your page like

<div class="tooltip" id="calc"></div>

and

#calc{
  top:-100px;
  left:-100px;
}

If you add the following js, it will show nicely

$(".tooltip","#images").each(function(){
  $("#calc").text($(this).text());
  $(this).width($("#calc").width());
});

updated fiddle here

回复收藏 0 原文

浅唱ヾ落雨殇 2024-12-09 07:12:31

块元素扩展到其容器的宽度。浮动不会改变这一点。

如果您希望工具顶部有不同的宽度，请使用width并指定宽度以像素为单位。

如果您想走更高级的路线，您可以定义宽度和高度，检查溢出并使用 JavaScript 使其更宽。

回复收藏 0 原文

从﹋此江山别 2024-12-09 07:12:31

我认为你需要稍微改变一下你的方法！您可以在具有绝对位置的 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。

I think you need to change your approach a bit! Instead of using the same div as the actual tooltip, you can use its HTML content inside a div that has an absolute position and you set its position based on the position of the object being hovered.

$('#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();
});

where #myTooltip is a div defined outside your list that has an absolute position.

回复收藏 0 原文

~没有更多了~