2

我有一堆包含在链接中的图像，例如：

<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'));
    });
4

6 回答 6

1

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

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

演示

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

于 2011-08-01T18:38:03.737 回答
0

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

于 2011-08-01T17:17:03.287 回答
0

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

试试这个：

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

它使用jQuery的after()功能。

于 2011-08-01T17:21:02.607 回答
0

这应该为你做：

$('.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>为您的图像。

一点额外的。

于 2011-08-01T17:45:55.407 回答
-1

那不应该是：

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

编辑：

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

于 2011-08-01T17:14:42.497 回答
-2

试试这个

$('.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();
});
于 2011-08-01T17:27:01.867 回答