使用jQuery在悬停时淡出兄弟姐妹

Question

我希望在li悬停时淡出列表中的兄弟元素，并在悬停时淡出。我知道这可以使用CSS完成，但它的工作程度与我喜欢的完全相同。如何使用jQuery实现这一目标？

＆＃13;

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Anton");
body {
  background: #F4D35E;
}

ul {
  List-style: none;
  width: 1000px;
  margin: 0 auto;
  padding: 0px 100px;
}

ul li {
  display: inline-block;
  color: #DA4167;
  font-family: 'Anton', serif;
  font-size: 300px;
  margin: 0px 50px;
}

ul li:hover {
  color: white;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$('li').hover(
  function() {
    $(this).siblings().addClass('fade-out');
  },
  function() {
    $(this).siblings().removeClass('fade-out');
  }
);

在.fade-out班级设置淡出样式。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('li').hover(
    function() {
      $(this).siblings().addClass('fade-out');
    },
    function() {
      $(this).siblings().removeClass('fade-out');
    }
  );
});

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Anton");
body {
  background: #F4D35E;
}

ul {
  List-style: none;
  width: 1000px;
  margin: 0 auto;
  padding: 0px 100px;
}

ul li {
  display: inline-block;
  font-family: 'Anton', serif;
  font-size: 300px;
  margin: 0px 50px;
  color: rgba(218, 65, 103, 1);
  transition: color .2s;
}

ul li:hover {
  color: white;
}

.fade-out {
  color: rgba(218, 65, 103, .5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;