当选择当前菜单项时，其他菜单项会淡出

Question

示例：

我在“联系”页面。我希望“联系人”菜单项的不透明度为100％，其余为30％不透明度。 我在“关于”页面。我希望“关于”菜单项的不透明度为100％，其余为30％不透明度。

我的菜单是这样的：

HTML：

<ul class="menu">
<li class="menu-item menu-item-1"><a href="some_link">Home</a></li> 
<li class="menu-item menu-item-2 current-menu-item"><a href="some_link">Contact</a></li> 
<li class="menu-item menu-item-3"><a href="some_link">About</a></li>
</ul>

CSS：

.menu .menu-item-1 {background: url('images/image1.jpg');}
.menu .menu-item-1 a {background: url('images/transparent-black-border-1.png') no-repeat;  background-position: bottom;}
.menu .menu-item-2 {background: url('images/image2.jpg');}
.menu .menu-item-2 a {background: url('images/transparent-black-border-2.png') no-repeat;  background-position: bottom;}
.menu .menu-item-3 {background: url('images/image3.jpg');}
.menu .menu-item-3 a {background: url('images/transparent-black-border-3.png') no-repeat;  background-position: bottom;}

我想要的是什么： 当出现.current-menu-item类时，该菜单项应为100不透明度，其他菜单项为30％。此外，.menu .menu-item-1背景图片也应该淡化，而不仅仅是a-tag。

你能帮助我吗？

Answer 1

您可以使用not（）函数..

JSFiddle

JS：

$(".menu-item").on('mouseenter', function(){
  $(".menu-item").find('a').not($(this).find('a')).css('opacity','0.3')
}).on('mouseleave', function(){
  $(".menu-item").find('a').css('opacity','1');
});

HTML：

<ul class="menu">
  <li class="menu-item"><a href="some_link">Some text</a></li> 
  <li class="menu-item"><a href="some_link">Some text</a></li> 
  <li class="menu-item"><a href="some_link">Some text</a></li>
</ul>

注意：在ul中包含锚标记是一种不好的做法。 ul中应该只有li标签。因此我把a-tag放在每个列表中。

E：更新后，您说您希望当前页面的不透明度为1，其余为0.3。在悬停时，您希望悬停的li元素也在1上。

Updated Fiddle

在HTML标记中，您可以在每个页面上为所需的菜单项设置活动类。为该类赋予不透明度1，其余菜单项的不透明度为0.3。悬停时不要触摸活动类，而是触摸其他类。

HTML：

<ul class="menu">
  <li class="menu-item active"><a href="some_link">Home</a></li> 
  <li class="menu-item"><a href="some_link">Page1</a></li> 
  <li class="menu-item"><a href="some_link">Page2</a></li>
</ul>

CSS：

.menu-item {
  opacity: 0.3;
}
.active {
  opacity: 1;
}

JS：

$(".menu-item").on('mouseenter', function(){
  $(this).not('.active').css('opacity','1')
}).on('mouseleave', function(){
  $(this).not('.active').css('opacity','0.3');
});

Answer 2

要更改不透明度，您可以执行以下操作：

$(".menu-item").hover(function(){
    $(".menu-item").each(function(){
         $(this).css("opacity", 0.8);
    })
    $(this).css("opacity", 1);
});

为了更方便的选择器，最好将HTML结构更改为：

<ul class="menu">
    <li class="menu-item menu-item-1">...</li> <a href="some_link">Some text</a>
    <li class="menu-item menu-item-2">...</li> <a href="some_link">Some text</a>
    <li class="menu-item menu-item-3">...</li> <a href="some_link">Some text</a>
</ul>

要将图像更改为B＆amp; W /灰度，您需要使用HTML5 Canvas，并使用此jQuery.BlackAndWhite ..