Можете ли вы применить эффект наведения CSS к элементу, который не является дочерним элементом зависающего элемента?

Я не был уверен, возможно ли это или нет. Сейчас я работаю в анимации CSS3, и мне нужно навести курсор на ссылку, которая будет влиять на другой элемент div (не-ребенок) на странице. Я не был уверен, есть ли работа вокруг или нет.

<style type="text/css">

#header {
 background-color:red;
}

#header:hover .element {
 background-color:blue;
}

.element {
 background-color:green;
}

</style>

<header id="header">
     <li><a href="#">Hover</a></li>
</header>

<div class="element" >
 <p>hello world </p>
</div>

Ответ 1

Так как это соседние братья и сестры, вы можете использовать соседний селектор для сиблинга: +.

#header:hover + .element {
 background-color:blue;
}

Это хорошо поддерживается в большинстве современных браузеров *. IE7 может быть ошибкой. IE6 и ниже не поддерживают его.

* В одном из других ответов упоминается общий селектор, который не работает в Webkit при использовании с динамическим псевдоклассом, например :hover из-за эта ошибка. Обратите внимание, что эта же ошибка может вызвать проблемы в Webkit, если вы попытаетесь уложить соседние селекторные ролики с динамическим псевдоклассом. Например, #this:hover + sibling + sibling не будет работать в Webkit.

Ответ 2

Существует общий селектор для сиблинга (~), который выбирает элементы родства.

Таким образом, с опубликованным HTML-текстом #header:hover ~ .element выберет <div class="element">, когда его последующий родственник зависающего заголовка.

Даже IE 7 поддерживает его, поэтому вы находитесь на относительно прочной основе.

Ответ 3

Повторите ошибку webkit для селектора селектора, эта статья имеет только обходной путь css:

http://css-tricks.com/webkit-sibling-bug/

Цитирование:

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Выше создается анимация на странице, и это, похоже, мешает решить эту проблему. Вышеприведенное может быть добавлено непосредственно к главному css или создать webkit только таблицу стилей, чтобы идти с вашим, т.е. взломать один.

Порекомендовал бы webkit только таблицу стилей что-то вроде:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>

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

Ответ 4

К сожалению, это не сработает, если ваш класс .element не находится в элементе .bgchange. Что характер каскада: вы не можете (только с помощью CSS) влиять на элементы DOM, которые структурно /heirarchically удалены друг от друга.

Ответ 5

Я так не думаю. Эта конструкция: #header.bgchange: hover.element указывает, что элемент находится внутри .bgchange. Я думаю, это нужно JS