<li>翻轉+文字

Question

我有一個菜單，其中包含平鋪圖像w / text。 參見小提琴：

http://jsfiddle.net/techydude/GF8tS/

有沒有一種方法可以使框懸停並使文本也激活其懸停狀態，反之亦然？

Answer 1

是。

不要在實際元素上使用:hover ，而是通過它們的公共父級li應用它。

所以用

li:hover .rounded而不是.rounded:hover

和

li:hover .tileText而不是.tileText:hover

演示在http://jsfiddle.net/gaby/DwT8K/1/

Answer 2

是的http://jsfiddle.net/GF8tS/1/

我修改了CSS，因此當用戶將鼠標懸停在list-item ，它將修改.tileText和.rounded的CSS

li:hover .rounded {
-webkit-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
-moz-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
}
li:hover .tileText {
color:#C3EA00;
font-weight:bold;
text-decoration:none;
}