<li> ролловер + текст

Question

У меня есть меню с мозаичными изображениями под текстом.См. Fiddle:

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

Yup http://jsfiddle.net/GF8tS/1/

Я изменил CSS, поэтому, когда пользователь наводит курсор на list-item, он будет изменять CSS .tileText и .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;
}