Question

我只是在学习jQuery，而我正在尝试编写一个小脚本。总结基本的HTML代码：

<ul class="boxes">
<li id="box1">1</li>
<li id="box2">2</li>
<li id="box3">3</li>
</ul>

然后我使用jQuery创建活动元素的悬停效果：

$(document).ready(function(){
$('#box2').hover(function(){
  // In
  $(this).text('IN')
}, function(){
  // Out
  $(this).text('OUT')
})

我想补充的是，所有其他没有悬停的li元素都会逐渐消失。我想知道$（this）是否与'ul'类“方框”中所有非徘徊的'li'相反。

感谢任何可以帮助我的人！：）

Answer 1

试试这个：

$(document).ready(function(){
    $('.boxes li').hover(function(){
        $('.boxes li').not(this).fadeOut();
    }, function(){
        $('.boxes li').not(this).fadeIn();
    })
});

Answer 2

this的反面可能是.not(this)：

$('.boxes li').not(this).fadeOut();

另见example。

Answer 3

以下是我认为您要完成的一些示例。

关键是，在使用您正在执行的唯一id属性值时，要使用公共类（在本例中为box）。

工作演示：http://jsfiddle.net/gkkta/3/

$('.box').hover(function(){
    $('.box').stop().fadeTo(500, .5);
    $(this).stop().fadeTo(1000, 1.0);
}, function(){
    $(this).stop().fadeTo(500, .5);
});

Answer 4

另一种方式是fadeout all和fadein this

$('#box2').hover(function(){
      $('.boxes > li').fadeTo(100,.25);
      $(this).text('IN').fadeTo(100,1);
    }, function(){
     $('.boxes > li').fadeTo(100,1);
     $(this).text('OUT');
});

小提琴：http://jsfiddle.net/n2Znw/1/

如何为jquery函数选择所有非活动div

4 个答案: