Question

我已经接受了一项测试任务。除了这一件事之外没什么特别的。需要降低所有其他元素的不透明度，除了那些被鼠标悬停的元素。我怎样才能做到这一点？ css比JS更优选。 http://i.stack.imgur.com/ua8TM.jpg这里是一个示例链接。

Answer 1

这很容易做到。我用纯CSS为你做了JSFiddle。

当列表悬停时，只需使列表中的每个元素都透明。使悬停的项目不透明。

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

Answer 2

＆＃13;

li:not(:hover)
    {
        opacity: 0.5;
    }

＆＃13;

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

＆＃13;

Answer 3

很多。

我正在尝试一些这方面的事情。谢谢你们。

#menu:hover {
    opacity: 0.5;
  }
  #menu li>a:hover {
    opacity: 1 !important;
    font-weight: bold;
    z-index: -1 !important;
  }

为所有节点的元素设置透明度

3 个答案: