Делаем одновременное переключение двух соседних элементов, если вы наводите курсор на любой элемент. - PullRequest
Новая
       36

Делаем одновременное переключение двух соседних элементов, если вы наводите курсор на любой элемент.

1 голос
/ 29 июня 2011

Я создал DIV с двумя DIV внутри; DIV с изображением ролловера и DIV под ним с текстом и обычным поведением ролловера.

Текст в тексте описывает изображение, и они оба являются ссылками на одно и то же место, поэтому я хочу, чтобы они одновременно переключались при наведении курсора мыши на любую из них.

Может кто-нибудь сказать мне, как я мог бы сделать это только с помощью CSS?

Большое спасибо!

1 Ответ

2 голосов
/ 29 июня 2011

Вы можете поместить :hover на внешнюю <div>, а затем использовать ее для выполнения опрокидывания на внутренних <div> с. Например: 

<div class="outer">
    <div class="inner-img">
    </div>
    <div class="inner-text">
        Where is pancakes house?
    </div>
</div>

И немного CSS: 

.outer {
    width: 200px;
    border: 1px solid #000;
}
.inner-img {
    width: 200px;
    height: 100px;
    background-image: url(http://placekitten.com/200/100);
}
.inner-text {
    width: 200px;
}
.outer:hover .inner-img {
    background-image: url(http://placekitten.com/201/100);
}
.outer:hover .inner-text {
    background-color: #dfd;
}

И пример: http://jsfiddle.net/ambiguous/3bXhA/

...