Изменение цвета элементов-близнецов при наведении с помощью CSS

Ниже мой HTML

<h1>Heading</h1>
<a class="button" href="#"></a>

Что я хочу сделать, когда я нахожу тэг <a>, я хочу изменить цвет тега <h1>, используя CSS. Как я могу достичь этого?

PS ----- * Отредактировано * ----------

Что делать, если я обернуваю div вокруг него идентификатором в нем?

<div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#"></a>
</div>

Помогло ли это?

Ответ 1

Нет селектор CSS, который может это сделать (в CSS3, даже). Элементы в CSS никогда не знают своего родителя, поэтому вы не можете сделать a:parent h1 (например). Они также не знают о своих братьях и сестрах (в большинстве случаев), поэтому вы не можете сделать #container a:hover { /* do something with sibling h1 */ }. В принципе, свойства CSS не могут изменять ничего, кроме элементов и их детей (они не могут получить доступ к родителям или братьям и сестрам).

Вы можете содержать h1 в пределах a, но это также сделает ваш h1 возможным.

Вы сможете достичь этого, используя JavaScript (jsFiddle доказательство концепции). Это будет выглядеть примерно так:

$("a.button").hover(function() {
    $(this).siblings("h1").addClass("your_color_class");
}, function() {
    $(this).siblings("h1").removeClass("your_color_class");
});

Ответ 2

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

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
h1:hover + a {
    color: #4f4fd0;
}
a:hover + h1 {
    background-color: #444;
}

<h1>Heading</h1>
<a class="button" href="#">The &quot;Button&quot;</a>
<h1>Another Heading</h1>

Ответ 3

Html:

<div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#">link</a>
</div>

CSS:

#banner:hover h1 {
    color: red;
}

#banner h1:hover {
    color: black;
}

a {
    position: absolute;
}

Сценарий: http://jsfiddle.net/joplomacedo/77mqZ/

Элемент a абсолютно позиционируется. Не может быть идеальным для вашей существующей структуры. Дайте мне знать, я мог бы найти обходное решение.

Ответ 4

Измените тег H1 на ссылку, как бы это было похоже на обычный текст? И затем используйте это,

a:link {color:#FF0000;}      
a:hover {color:#FF00FF;}

И он должен работать, когда вы наведите указатель мыши:) вы также можете сделать его конкретным, указав его в div и затем настроив его так:

.exampledivname a:link {color:#FF0000;}      
.exampledivname a:hover {color:#FF00FF;}

Это должно помочь.

Ответ 5

http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      ul:hover > li
      {
        opacity: 0.5;
      }
      ul:hover li:hover 
      {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </body>

</html>

вот пример того, как это можно сделать в чистом css, надеюсь, что это поможет кому-то