Связка дыух блоков - div и span псевдоклассом hover

[Torawhite]

Здравствуйте! Есть код типа:

HTML:

<div class="class_1">     <span></span></div>

CSS:

.class_1 {display: block;width: 40px;height: 40px;background-color: #2b2b2b;}.class_1:hover {background-color: #000000;cursor: pointer;}.class_1 span {display: block;width: 20px;height: 20px;float: right;margin-top: 10px;margin-bottom: 10px;background-color: #aaaaaa;}.class_1 span:hover {background-color: #ffffff;cursor: pointer;}

Для наглядности http://jsfiddle.net/3bbb980k/

 

Как можно сделать, чтобы при наведении на родительский div выполнялся свой hover и у div, и у дочернего span?

 

[mrnobody]

Так что ли?

http://jsfiddle.net/mrnobody/3bbb980k/1/ 

[roland]

В данном конкретном случае я бы вообще через бордеры сделал, типа так http://jsfiddle.net/Roland5858/syvdwfve/

Но ты о другом спрашивал. Присваевай ховер тому элементу на который курсор наводишь, а стили прописывай для того который меняется, т.е. не

.class_1 span:hover {

а так:

.class_1:hover span {

http://jsfiddle.net/Roland5858/cb7kLec3/

 

ЗЫ: поменял первый цвет в примере, а то плохо видно разницу.

Так что ли?

http://jsfiddle.net/mrnobody/3bbb980k/1/

.class_1 span:hover

это не нужно, т.к. невозможно навести на span не наведя на .class_1

Edited February 8, 2015 by roland

[Torawhite]

В данном конкретном случае я бы вообще через бордеры сделал, типа так http://jsfiddle.net/Roland5858/syvdwfve/

Но ты о другом спрашивал. Присваевай ховер тому элементу на который курсор наводишь, а стили прописывай для того который меняется, т.е. не

.class_1 span:hover {

а так:

.class_1:hover span {

http://jsfiddle.net/Roland5858/cb7kLec3/

 

ЗЫ: поменял первый цвет в примере, а то плохо видно разницу.

Так что ли?

http://jsfiddle.net/mrnobody/3bbb980k/1/

.class_1 span:hover

это не нужно, т.к. невозможно навести на span не наведя на .class_1

Дело в том, что в диве есть картинка фоновая, а в span - текст. Через бордер не выйдет

[roland]

Дело в том, что в диве есть картинка фоновая, а в span - текст. Через бордер не выйдет

Ну я так и понял, потому и написал, что только в этом случае

[Switch74]

http://jsfiddle.net/3bbb980k/2/

[Torawhite]

http://jsfiddle.net/3bbb980k/2/

Спасибо огромное! То, что нужно! А я уже было собрался скрипт писать под это дело...

[roland]

 

http://jsfiddle.net/3bbb980k/2/

Спасибо огромное! То, что нужно! А я уже было собрался скрипт писать под это дело...

 

Я ж те уже скинул решение выше: http://jsfiddle.net/Roland5858/cb7kLec3/

В примере Switch74 так же, но последний стиль удалить нужно - он не имеет смысла.

[Torawhite]

 

 

http://jsfiddle.net/3bbb980k/2/

Спасибо огромное! То, что нужно! А я уже было собрался скрипт писать под это дело...

 

Я ж те уже скинул решение выше: http://jsfiddle.net/Roland5858/cb7kLec3/

В примере Switch74 так же, но последний стиль удалить нужно - он не имеет смысла.

 

Ваша ссылка на тот момент не открывалась, пробовал не раз - выдавало ошибку. Сейчас открылась. Спасибо!