Можете ли вы применить эффект наведения CSS к элементу, который не является дочерним элементом для элемента hovered? - PullRequest
Новая
       20

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

24 голосов
/ 30 декабря 2010

Я не был уверен, возможно ли это или нет.Я сейчас работаю над анимацией 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>

Ответы [ 5 ]

26 голосов
/ 30 декабря 2010

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

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

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

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

16 голосов
/ 30 декабря 2010

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

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

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

2 голосов
/ 03 мая 2011

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

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

Цитата: 

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

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

Рекомендую таблицу стилей только для веб-набора примерно так: 

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

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

1 голос
/ 30 декабря 2010

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

0 голосов
/ 30 декабря 2010

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

...