Javascript 在一个菜单上方的鼠标上降低其他菜单的不透明度

我有三个父菜单：菜单1、菜单2和菜单3。在菜单1的鼠标上方，我需要降低其他菜单的不透明度。还应显示菜单1的菜单项。我的目标是做一些如截图所示的东西。一个简单的例子对我来说就足够了。我将相应地修改它

这是我的小提琴

nav-ul{
背景：黄色；
显示：内联表；
列表样式：无；
填充：0；
边界半径：25px；
盒影：10px 10px 10px#8888888；
}
导航ul>li{
浮动：左；
位置：相对位置；
}
nav ul li:悬停a{
颜色：#fff；
}
导航ul>li:悬停{
背景：#665c；
}
海军ulli a{
填充：15px 30px；
文字装饰：无；
颜色：#302e2e；
显示：块；
}
导航ul{
宽度：200px；
右：0；
显示：无；
位置：绝对位置；
填充：0；
背景：白色；
边界半径：0；
}
导航ulli：悬停ul{
显示：块；
}
李国宝{
浮动：无；
}
海军ulli a{
背景：#665c；
颜色：#fff；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
}

如果您正在使用JQuery，请尝试以下操作：

$(".menu").mouseover(function(){
    $(".menu").css("opacity",0.2);
    $(this).css("opacity",1);
})

其中“menu”是所有要将不透明度降低到0.2的菜单的类 下一行将当前菜单的不透明度设置为1

对于

$（“.menu”）.mouseleave（..）

---

仅使用css解决此问题的一种方法是降低所有

li

-元素的不透明度，同时将鼠标悬停在

ul

上。 然后在当前悬停的

li

上恢复不透明度

您可以通过添加此代码来实现这一点

nav ul:hover > li {
  opacity: 0.5;
}

nav ul li:hover {
  opacity: 1;
}

完整示例

nav-ul{
背景：黄色；
显示：内联表；
列表样式：无；
填充：0；
边界半径：25px；
盒影：10px 10px 10px#8888888；
}
导航ul>li{
浮动：左；
位置：相对位置；
}
导航ul:悬停>li:不（：悬停）{
-webkit转换：.7s；
-moz跃迁：.7s；
过渡：.7s；
}
nav ul li:悬停a{
颜色：#fff；
}
导航ul>li:悬停{
背景：#665c；
}
导航ul：悬停>垂直{
不透明度：0.5；
}
nav ul li:悬停{
不透明度：1；
}
海军ulli a{
填充：15px 30px；
文字装饰：无；
颜色：#302e2e；
显示：块；
}
导航ul{
宽度：200px；
右：0；
显示：无；
位置：绝对位置；
填充：0；
背景：白色；
边界半径：0；
}
导航ulli：悬停ul{
显示：块；
}
李国宝{
浮动：无；
}
海军ulli a{
背景：#665c；
颜色：#fff；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
}

菜单在哪里？我的目标是制作屏幕截图中所示的内容。一个简单的示例对我来说就足够了。我会相应地修改它。你介意发布一个不符合预期的简单示例吗？你会想使用js影响其他元素。类似这样的事情我想：谢谢你的努力..但我目前没有使用任何JQuery..我在这里添加了我的fidle。你能看一下吗..这对我也很有效。我做了一些修改并使用了JQuery。成功了。谢谢R.希菲尼。很高兴能帮忙：）

nav ul:hover > li {
  opacity: 0.5;
}

nav ul li:hover {
  opacity: 1;
}