Установить CSS тега span на элементе hover

Question

Эй, кто-нибудь знает, как я мог бы выполнить это с помощью чистого CSS.

<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>

Сделайте интервалы "Some Text" определенного цвета, когда поверх SomeDiv наведен курсор.

Не уверен, еслиэто возможно.Спасибо.

Answer 1

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

Если ссылка должна прийти после div, однако:

<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>

селектор для использования будет #someDiv:hover + #link span.

Answer 2

Это может быть возможно, если у вас есть родительский элемент, с которым нужно связать класс css hover.Например: -

<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>

& den используйте следующий css.

#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}

Answer 3

Я думаю, что это должно сработать, если предположить, что эти два элемента имеют общий родительский элемент, а a#link - первый дочерний элемент этого родительского элемента.

#parent div#someDiv:hover ~ a#link:first-child span {
   color: blue;
}

IE6 не поддерживает его , но если вы можете жить без IE6 (и вы действительно должны, IMO), вы должны быть в порядке.

Answer 4

Чистый CSS? Работаете во всех браузерах? Невозможно в этой структуре.