Question

我有一行HTML元素列表。每个列表项都包含超链接内的图像，如下所示：

<ul class="products">
  <li><a href="#" title="Title 1"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 2"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 3"><img src="image.jpg" /></a></li>
</ul>

当您将鼠标悬停在列表项上时，我基本上想要使用jQuery淡入包含链接标题的工具提示。因此，当您将鼠标悬停在第一个列表项上时，DOM将更改为以下内容：

<ul class="products">
  <li>
    <div class="product-title-ribbon">Title 1</div>
    <a href="#" title="Title 1"><img src="image.jpg" /></a>
  </li>
  <li><a href="#" title="Title 2"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 3"><img src="image.jpg" /></a></li>
</ul>

当您将鼠标移开时，工具提示需要淡出。它实际上最终会比标准工具提示更复杂，因此我不仅仅使用现成的解决方案;我试图了解机制，以便我能理解它并适应前进。

无论如何，我有基本的工作，但它很丑，因为工具提示在鼠标跨越项目时不断淡入淡出。我在这里做了一个小提琴：http://jsfiddle.net/YcuYY/。任何人都可以建议一种方法来改善这一点，以便工具提示更精致，没有闪烁或排队？通过这种排序，我应该能够继续根据最终要求进行调整。

var productRibbon = $('<div class="product-title-ribbon"></div>');

$('.products li').hover(function() {
    var productTitle = $('a',this).attr('title');
    productRibbon.text(productTitle);
    $(this).prepend(productRibbon);
    productRibbon.fadeIn(500);
},function () {
    $(productRibbon,this).fadeOut(500);
});

非常感谢大家！

Answer 1

不要听那些暗示hover错误的人。他们没有阅读jQuery官方文档。 .hover()方法为mouseenter和mouseleave事件绑定处理程序。

它完全正确且正确

为简单起见，我只会使用.on方法并委派mouseenter和mouseleave个事件。

此外，我不会迭代element productRibbon ，因为它不值得，我会立即将它追加到每个<li>内，以防止动画剧烈动画：

jsBin demo

$('.products li').each(function(){     
   $(this).append('<div class="product-title-ribbon">'+ $('a',this).attr('title')+'</div>');      
}).on('mouseenter mouseleave',function( e ) {    
   $(this).find('.product-title-ribbon').stop().fadeTo(400, e.type=='mouseenter'?1:0);      
});

虽然.stop()会阻止动画制作 e.type=='mouseenter'?1:0将根据当前注册的e事件确定不透明度级别并在display:none;

的CSS中添加.product-title-ribbon

Answer 2

我将jsFiddle改为http://jsfiddle.net/3ppqv/

改变是： 1）CSS - 将“display：none”添加到“product-title-ribbon”类

.products li {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #ccc;
}
.product-title-ribbon {
  position: absolute;
  width: 120px;
  top: 40px;
  left: -10px;
  background: #f00;
  display: none;
}

2）JavaScript，在div上使div成为局部变量，并将fadeOut的选择器更改为使用css类：

$('.products li').hover(function() {
    var productRibbon = $('<div class="product-title-ribbon"></div>');
        var productTitle = $('a',this).attr('title');
        productRibbon.text(productTitle);
        $(this).prepend(productRibbon);
    productRibbon.fadeIn(500);
    },function () {
        $('.product-title-ribbon',this).fadeOut(500);
    });

Answer 3

不要使用.hover（）。编辑：使用不透明度而不是fadeIn / fadeOut，或者如下所示使用stop（）而不是stop（1）。

$('.products li').on({
    mouseenter: function() {
        var productTitle = $(this).find('a').attr('title');

        productRibbon.text(productTitle);
        $(this).prepend(productRibbon);
        productRibbon.stop().animate({opacity:1},500);
    },
    mouseleave: function () {
        $(this).find(productRibbon).stop().animate({opacity:0},500);
    }
});

jQuery fadingin / out on hover / out，没有闪烁或队列

3 个答案: