我有三个父菜单:菜单1,菜单2和菜单3.在菜单1的鼠标悬停时,我需要降低其他菜单的不透明度。还应显示菜单1的菜单项。我的目标是制作截图中显示的内容。一个简单的例子就足够了。我会相应地修改它。
这是我的小提琴 https://jsfiddle.net/sruthisuresh/y2danw9h/3/
nav ul {
background: yellow;
display: inline-table;
list-style: none;
padding: 0;
border-radius: 25px;
box-shadow: 10px 10px 10px #888888;
}
nav ul > li {
float: left;
position: relative;
}
nav ul li:hover a {
color: #fff;
}
nav ul > li:hover {
background: #665c5c;
}
nav ul li a {
padding: 15px 30px;
text-decoration: none;
color: #302e2e;
display: block;
}
nav ul ul {
width: 200px;
right: 0;
display: none;
position: absolute;
padding: 0;
background: white;
border-radius: 0;
}
nav ul li:hover ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
background: #665c5c;
color: #fff;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
}
<body>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">PHP</a>
</li>
<li><a href="#">Illustrator</a>
</li>
<li><a href="#">Web Design</a>
</li>
</ul>
</li>
<li><a href="#">Other</a>
<ul>
<li><a href="#">Web Design</a>
</li>
<li><a href="#">User Experience</a>
</li>
</ul>
</li>
<li><a href="#">Inspiration</a>
</li>
</ul>
</nav>
</body>
答案 0 :(得分:2)
使用css解决此问题的一种方法是在悬停在li
上时降低所有ul
- 元素的不透明度。
然后恢复当前悬停的li
上的不透明度。
您可以通过添加此代码来完成此操作。
nav ul:hover > li {
opacity: 0.5;
}
nav ul li:hover {
opacity: 1;
}
完整示例
nav ul {
background: yellow;
display: inline-table;
list-style: none;
padding: 0;
border-radius: 25px;
box-shadow: 10px 10px 10px #888888;
}
nav ul > li {
float: left;
position: relative;
}
nav ul:hover > li:not(:hover){
-webkit-transition: .7s;
-moz-transition: .7s;
transition: .7s;
}
nav ul li:hover a {
color: #fff;
}
nav ul > li:hover {
background: #665c5c;
}
nav ul:hover > li {
opacity: 0.5;
}
nav ul li:hover {
opacity: 1;
}
nav ul li a {
padding: 15px 30px;
text-decoration: none;
color: #302e2e;
display: block;
}
nav ul ul {
width: 200px;
right: 0;
display: none;
position: absolute;
padding: 0;
background: white;
border-radius: 0;
}
nav ul li:hover ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
background: #665c5c;
color: #fff;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
}
&#13;
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Other</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
&#13;
答案 1 :(得分:1)
如果您正在使用JQuery,请尝试以下方法:
$(".menu").mouseover(function(){
$(".menu").css("opacity",0.2);
$(this).css("opacity",1);
})
其中&#34;菜单&#34;是要将不透明度降低到0.2的所有菜单的类 下一行将当前菜单的不透明度设置为1。
您还应该为$(".menu").mouseleave(....)
$(".menu").mouseleave(function(){
$(".menu").css("opacity",1);
})