3

我有一个连续的 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);
});

非常感谢各位！

4

3 回答 3

1

不要听人说这hover是错误的。他们不阅读 jQuery 官方文档。该.hover()方法绑定了 mouseenter 和 mouseleave 事件的处理程序。

这完全没问题，而且是正确的

.on为了简单起见，我将只使用该方法并委托mouseenterandmouseleave事件。

另外，我不会迭代element productRibbon因为它不值得，我会立即将它附加到<li>each 内部，以防止跳动的动画：

jsBin 演示

$('.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事件确定不透明度级别并在您的 CSS 中
添加display:none;.product-title-ribbon

于 2013-01-11T17:11:47.933 回答
1

我稍微改变了 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 成为悬停时的局部变量，并将选择器 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);
    });
于 2013-01-11T17:14:11.770 回答
0

不要使用 .hover()。编辑：使用不透明度而不是淡入/淡出，或者如下所述使用 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);
    }
});
于 2013-01-11T17:01:27.013 回答