對所有節點的元素設置透明度

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