[英]<li> rollover + text
I have a menu with tiled images w/text under them. 我有一个菜单,其中包含平铺图像w / text。 See Fiddle: 参见小提琴:
http://jsfiddle.net/techydude/GF8tS/ http://jsfiddle.net/techydude/GF8tS/
Is there a way I can rollover the box and have the text also activate its hover state, and vice versa? 有没有一种方法可以使框悬停并使文本也激活其悬停状态,反之亦然?
Yes. 是。
Instead of using :hover
on the actual elements, apply it through their common parent, the li
. 不要在实际元素上使用:hover
,而是通过它们的公共父级li
应用它。
So use 所以用
li:hover .rounded
instead of .rounded:hover
li:hover .rounded
而不是.rounded:hover
and 和
li:hover .tileText
instead of .tileText:hover
li:hover .tileText
而不是.tileText:hover
demo at http://jsfiddle.net/gaby/DwT8K/1/ 演示在http://jsfiddle.net/gaby/DwT8K/1/
Yup http://jsfiddle.net/GF8tS/1/ 是的http://jsfiddle.net/GF8tS/1/
I modified the CSS, so when the user hovers over the list-item
, it would modify the CSS of the .tileText
and the .rounded
我修改了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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.