武林網(www.survivalescaperooms.com)文章簡介：CSS網頁制作實例:有條件的添加hover樣式.

給元素添加一個hover樣式，很簡單，我們來看一個透明度的例子吧：

123456div {opacitydiv:hover {opacity

但是如果我們只是想讓當前真正hover了的div顯示，而讓其他的div模糊呢？
假設我們的HTML結構如下：

12345<section><div></div><div></div><div></div></section>

我們可以給所有的div元素添加下面的透明度降低的屬性：

123div {opacity

然后我們再特別處理那個真正hover了的div：

123div:hover {opacity

誰在用呢？
某敏感推在他們For Mac的程序中使用了相關的技術，效果還是不錯的：

這個想法可以擴展到很多地方，這里是一個列表的例子，當你鼠標進入列表的時候，其余列的透明度降低，本列中也一樣，只不過透明度有層層增加，視覺效果很不錯。代碼是這樣的：

1234567891011121314151617181920212223242526272829<div id="all"><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul></div>

CSS樣式：

12345678910111213141516171819202122232425262728a border-radius -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transitiona {opacityul:hover a {opacityul:hover a:hover {opacity

點擊這里查看Demo

這個小技巧，老式的瀏覽器是不支持的，因為他們只有對a標簽的hover特性，如果也想實現相應的效果，那么就要使用js來檢測鼠標進入的事件了。[English]

轉載請注明：
作者：RockUX–WEB前端
出自：有條件的添加Hover樣式