Question

我有几个带标签的区域。当我悬停一个区域时，我想更改该区域中标签的颜色更加突出，并淡化我没有悬停的区域中的其他标签。

如何进行交换？

$("li").hover(function(){
    $(this).find(".label").fadeOut(100);
});

Answer 1

您应该将两个函数传递给.hover。第一个将用作鼠标悬停的回调，第二个用于mouseout：

$("li").hover(
    function(){
        $(this).find(".label").fadeOut(100);
    },
    function(){
        $(this).find(".label").fadeIn(100);
    }
);

Answer 2

通常，您将两个函数传递给.hover()。第一个是mouseover函数，第二个是mouseout函数。

JS -

$("li").hover(
    function () {
        $(this).find("label").stop().fadeTo(100, 1);
    },
    function () {
        $(this).find("label").stop().fadeTo(100, 0);
    }
);

CSS -

label {
    opacity : 0;
    filter  : alpha(opacity=0);
}

.stop()将允许用户快速鼠标悬停然后输出，动画将不会一直运行，如果用户鼠标快速超出一堆，则会创建一个动画队列。我将.fadeTo()与.stop()一起使用，因为如果您使用.fadeOut() / .fadeIn()，则当用户鼠标快速移出时动画可能会中断。

.fadeTo()的另一个好处是我们只是为元素的opacity设置动画，因此元素仍保留在屏幕上的位置（即元素不会跳转）。

以下是演示：http://jsfiddle.net/jasper/ExWQp/

.hover()的文档：http://api.jquery.com/hover

Answer 3

$("li").hover(
  function () {
    // hover active
  }, 
  function () {
    // hover deactive
  }
);

Answer 4

我为你创建了这个例子。它使用无序列表，里面有＆lt; span＆gt; 标签，这些标签已经淡入/淡出。

<ul>
    <li><span>1st.</span> list item</li>
    <li><span>2nd.</span> list item</li>
    <li><span>3dr.</span> list item</li>
    <li><span>4th.</span> list item</li>
    <li><span>5th.</span> list item</li>
    <li><span>6th.</span> list item</li>
    <li><span>7th.</span> list item</li>
</ul>

$('li').mouseenter(function(){
    $('span', this).stop().animate({opacity:1}, 150)
    $('span', $(this).siblings('li')).stop().animate({opacity:0.3}, 150)
})

悬停 LI元素时，子 span 褪色为100％，同时LI的子跨度褪色为50％;

$('ul').mouseleave(function(){
    $('span', this).animate({opacity: 1}, 150);
})

当你离开父UL元素时，所有 span 元素都会被还原，动画为100％;

这是这个工作的例子...... http://jsfiddle.net/HBj4F/

悬停时淡入/淡出标签

4 个答案: