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

Question

我已经收到了一个测试task.nothing特别的，除了这些东西。需要减少所有其他元素的不透明度，但鼠标悬停的元素除外。 我该怎么做？ 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

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

<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>

Answer 3

TY很多。

我在想这件事。感谢你们。

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