在鼠标悬停一个菜单时降低其他菜单的不透明度

时间:2016-02-04 04:39:27

标签: javascript html css

我有三个父菜单:菜单1,菜单2和菜单3.在菜单1的鼠标悬停时,我需要降低其他菜单的不透明度。还应显示菜单1的菜单项。我的目标是制作截图中显示的内容。一个简单的例子就足够了。我会相应地修改它。

enter image description here

这是我的小提琴 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>

2 个答案:

答案 0 :(得分:2)

使用css解决此问题的一种方法是在悬停在li上时降低所有ul - 元素的不透明度。 然后恢复当前悬停的li上的不透明度。

您可以通过添加此代码来完成此操作。

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

nav ul li:hover {
  opacity: 1;
}

完整示例

&#13;
&#13;
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;
&#13;
&#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);
})