如何让 div 出现在鼠标悬停在其上方的元素旁边？ (jQuery)

Question

我有一堆包含在这些链接中的图片：

<a class="tipsFeatured" href="#" rel="products/p0.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/pott-5pc-setting-pott.jpg" alt="Silver Cutlery" width="170" height="170" /></a>
            <a class="tipsFeatured" href="#" rel="products/p1.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/Design-House-Stockholm-Cobalt_Pitcher.jpg" alt="Design House Stockholm Cobalt Pitcher" width="170" height="170" /></a>

我有一个 id 为 #descText 的 div，我希望当鼠标悬停在每个链接上时，div 会出现在当前元素旁边，每次都带有不同的文本。 “每次不同的文本”部分我知道该怎么做，但我无法让 div 出现在我刚刚拥有的当前悬停元素旁边：

$('.tipsFeatured').bind('mouseover',function(){
        var $txt = $('#descText');
        $(this).next().append($txt.css('display','block'));
    });

Answer 1

您需要使用 .mouseenter() 和 .mouseleave() 或 .hover() 的组合，这需要 2 个函数 否则任何 .append()ed 或 after()ed 都将添加到每只鼠标上移动锚标记。我更喜欢显式的 mouseenter/leave，但这是个人偏好，因为双重功能 hover 是 mouseenter/leave 的别名。

以下内容将使#descText 可见并将其附加到<a>，因此它位于锚点内部，因此是超链接的。如果您不想要<span id="descText"/> 超链接，请使用.after() 而不是.append()。

HTML

<a class="tipsFeatured" href="#" rel="products/p0.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/pott-5pc-setting-pott.jpg" alt="Silver Cutlery" width="170" height="170" /></a>
<a class="tipsFeatured" href="#" rel="products/p1.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/Design-House-Stockholm-Cobalt_Pitcher.jpg" alt="Design House Stockholm Cobalt Pitcher" width="170" height="170" /></a>

<span id="descText">the text</span>

CSS

#descText { display:none; }

JavaScript

$('.tipsFeatured').mouseenter(function() {
    $(this).append($('#descText').show());
}).mouseleave(function() {
    $('#descText').hide();
});

Demo

我假设您有多个 图像描述，并且在附加之前以某种方式更改了 #descText 内的文本，因为这只适用于一个唯一的 #descText 元素。

Answer 2

这应该为你做：

$('.tipsFeatured').hover(
    function(){
        var element = $(this).children(),
            text    = element.attr('data');

    $(this).append('<div id="descText">'+text+'</div>');

    },
    function(){

    $('#descText').remove();

    }
);

演示： http://jsfiddle.net/hx8Tv/2/

用你的图片替换<span>。

一点点extra。

Answer 3

解决此问题的一种方法是，您可以在您希望具有描述悬停功能的每个元素旁边创建一个空的<div id="foo_1"></div>，并确保每个 ID 都是唯一的。然后在 javascript 中，您可以说出类似 $('foo_'+id) 的内容，并通过 id 变量对其进行标识。

Answer 4

通过使用.next()，您将选择 DOM 中的下一个 a 元素并将描述 div 附加到它，而不是在当前 a 元素之后插入描述 div。

试试这个：

$('.tipsFeatured').bind('mouseover',function(){
    var $txt = $('#descText');
    $(this).after($txt.css('display','block'));
});

使用 jQuery 的 after() 函数。

Answer 5

不应该是这样的：

$('.tipsFeatured').bind('mouseover',function(){
    var $txt = $('#descText');
    $txt.css('display','block');
    $(this).after($txt);
});

编辑：

更新了我的答案，这就是我回到页面要做的事情。一个很好的教训 - 最好先测试，然后发布，而不是发布和纠正。

Answer 6

试试这个

$('.tipsFeatured').hover(function() {
    var contentInsideElement = /* 'Whatever'; */
    var descText =  $("#descText");
      if(descText.length)
        descText.html(contentInsideElement);
      else
         descText = $('<div id="descText">' + contentInsideElement +   '</div>').appendTo(document.body);

    $(this).after(descText);
   }, function() { // Remove new element on mouseout
     $('#descText').hide();
});