<li>翻转+文字</li>

时间:2012-04-01 18:27:11

标签: css rollover

我有一个带有平铺图像的菜单,其中包含/ text。见小提琴:

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

有没有办法可以翻转框并让文本也激活其悬停状态,反之亦然?

2 个答案:

答案 0 :(得分:1)

不是在实际元素上使用:hover,而是通过它们的共同父元件li来应用它。

所以使用

li:hover .rounded代替.rounded:hover

li:hover .tileText代替.tileText:hover

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

答案 1 :(得分:0)

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