jquery - 如何让 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() 编辑或 after() ed 将在每次鼠标移到 anchor 标记上时添加。我更喜欢显式的 mouseenter/leave，但这是个人偏好，因为双功能悬停是 mouseenter/leave 的别名。

以下内容将使#descText可见并将其附加到 <a> ，因此位于 anchor 内部，因此是超链接的。如果您不想要<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元素。