グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える

JavaScriptでよく見かける、ホバー 状態のアイテム以外にエフェクトを かける、みたいなのをCSSで実装する という内容です。目新しい手法では 無いです。 サンプルはtext-shadowを使います。 Sample 親要素に:hoverを使って、全体にエフェクトをかけ、子要素の:hoverで元の表示に戻るようにするとホバーしてるアイテム以外にエフェクトがかかったように見えます。 .menu ul li a {/*メニューの基本スタイル*/ color: black; float: left; text-decoration: none; padding: 10px ; letter-spacing: 1px; } .menu:hover li a {/*親要素にホバーで子要素全体にエフェクト*/ text-shadow: 0px 0px 10px #555; color: #ddd;

[sugarshin]

from かちびと.net http://kachibito.net

[tuki0918]

2重hover？

[snaflot]

テーブルのセル内で改行させない

[teruringo]

やってみたい。