Question

快速提问，我有一个无序的“产品”列表，我希望描述显示在悬停状态。除了动画一次应用于每个产品外，这种方法很好。如何定位我正在悬停的列表项而不为每个li提供唯一ID？我确定答案使用“this”但我还没弄清楚如何成功地做到这一点。

产品：

<ul id='products'>  
   <li>
     <div class='productDesc'>
        <img src = 'images/myImage1' />
        <p>
           Description 1...
        </p>
     </div>
   </li>

   <li>
     <div class='productDesc'>
        <img src = 'images/myImage2' />
        <p>
           Description 2...
        </p>
     </div>
   </li>

</ul>

的javascript：

$(document).ready(function() {

    $('#products li').hover(function(){
        $(".productDesc").fadeIn("slow");
    }, function(){
        $(".productDesc").fadeOut("slow");
    });

});

CSS：

 .productDesc{ display:none; }

Answer 1

您需要使用$(this)来获取对悬停列表项的引用以及 .find() ，以便在该悬停列表项中获取子.productDesc：

$(document).ready(function() {
    $('#products li').hover(function(){
        $(this).find(".productDesc").fadeIn("slow");
    }, function(){
        $(this).find(".productDesc").fadeOut("slow");
    });
});

<强> Fiddle Demo

您还可以使用 .fadeToggle() 缩短代码，以便在fadeIn和fadeOut之间切换

$(document).ready(function() {
    $('#products li').hover(function(){
        $(this).find(".productDesc").fadeToggle("slow");
    });
});

<强> Fiddle Demo

Answer 2

使用this（这将是您暂停的li），并在该元素中找到.productDesc。

$('#products li').hover(function(){
        $(this).find(".productDesc").fadeIn("slow");
}, function(){
        $(this).find(".productDesc").fadeOut("slow");
});

Answer 3

$(document).ready(function() {
    $('#products li').on('mouseenter mouseleave', function() {
        $(".productDesc", this).fadeToggle('slow');
    });
});

FIDDLE

Answer 4

事件处理程序中的

this引用当前目标元素，因此您可以使用

在当前productDesc中找到li元素

$(document).ready(function () {
    $('#products li').hover(function () {
        $(this).find(".productDesc").fadeIn("slow");
    }, function () {
        $(this).find(".productDesc").fadeOut("slow");
    });
});

在<ul> </ul> </li>中定位单个<li>

4 个答案: