Question

两个无序列表。当将鼠标悬停在一个列表项上时，我需要使另一个列表中的列表项变暗，而不是悬停列表项的自己的兄弟项。

使用下面的代码，我可以使所有其他列表项变暗，但是那些正在徘徊，但我似乎无法让兄弟姐妹进入等式。

HTML：

<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>
<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>

JQUERY：

$('.tn').hover(
function() {
    $(".tn:not(:hover)").not(this).css({"-webkit-filter":"brightness(15%)"});
},
function() {
    $(".tn").css({"-webkit-filter":"brightness(100%)"});
}
);

对于任何暗示我应该将鼠标悬停在整个无序列表上的人来说，由于设计的某些限制，这是不可能的：/

Answer 1

HTML：

<ul class="tnparent">

的javascript：

$('.tnparent:not(:hover) .tn').css({"-webkit-filter":"brightness(15%)"})

Answer 2

使用.closest('ul')查找此列表，然后仅对其兄弟姐妹进行操作。

＆＃13;

$('.tn').hover(
  function() {
    var thislist = $(this).closest('ul');
    var otherlists = thislist.siblings('ul');
    otherlists.find('.tn').css({
      "-webkit-filter": "brightness(15%)"
    });
  },
  function() {
    $(".tn").css({
      "-webkit-filter": "brightness(100%)"
    });
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
</ul>
<ul>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
</ul>

＆＃13;

Answer 3

你想要相反的ul让我们遍历当前的父亲，然后跳到另一个

$('.tn').hover(function(){
   var $currentList = $(this).parent();
   var $otherListItems = $currentList.siblings('ul').find('.tn');
   $otherListItems.doSomething();

},function(){
  /* similar */

})

选择所有元素除了兄弟姐妹和自我

3 个答案: