I have a menu with tiled images w/text under them. See Fiddle:
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
.
So use
li:hover .rounded
instead of .rounded:hover
and
li:hover .tileText
instead of .tileText:hover
Yup 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
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.