如何让 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 个函数，否则任何内容都是

以下代码将使 #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();
});

演示

我假设您有多个图像描述 但在附加之前会以某种方式更改 #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/

将 替换为您的图像。

一点额外。

Answer 3

解决此问题的一种方法是，您可以在您想要将描述悬停在每个元素旁边创建一个空的

并确保每个 id 都是唯一的。然后在 JavaScript 中，您可以输入类似 $('foo_'+id) 的内容，并通过 id 变量对其进行标识。

Answer 4

通过使用 .next()，您可以选择 DOM 中的下一个 a 元素并向其附加描述 div，而不是在当前 之后插入描述 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();
});