鼠標懸停效果很有用處，如何有條件的添加這個央視呢？我們來看一下，給元素添加一個hover樣式，很簡單，我們來看一個透明度的例子吧：div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我們只是想讓當前真正hover了的div顯示，而讓其他的div模糊呢？ 假設我們的HTML結構如下： section div /div div /div div /div /section 我們可以給所有的div元素添加下面的透明度降低的屬性： .parent:hover div { opacity: 0.5; } 然后我們再特別處理那個真正hover了的div：.parent:hover div:hover { opacity: 1.0; } 誰在用呢？ 某敏感推在他們For Mac的程序中使用了相關的技術，效果還是不錯的： 實例 這個想法可以擴展到很多地方，這里是一個列表的例子，當你鼠標進入列表的時候，其余列的透明度降低，本列中也一樣，只不過透明度有層層增加，視覺效果很不錯。代碼是這樣的： 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 CSSyangshi_10628_1.html' target='_blank'>CSS樣式： #all ul { list-style: none; float: left; width: 200px; padding: 0 10px 0 0; } #all a { text-decoration: none; display: block; padding: 10px; background: #900; border-radius: 20px; color: white; text-align: center; margin: 0 0 5px 0;
-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; } #all:hover a { opacity: 0.2; } #all:hover ul:hover a { opacity: 0.5; } #all:hover ul:hover a:hover { opacity: 1; } 這個小技巧，老式的瀏覽器是不支持的，因為他們只有對a標簽的hover特性，如果也想實現相應的效果，那么就要使用js來檢測鼠標進入的事件了html教程
