Как при наведении на один элемент менять стили другого элемента?

Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали другого цвета.

Как записать?
Так не работает:

.block:hover {  .block h1 { color: red;} }

    

Ответы

Ответ 1

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

  
  
Lorem Ipsum





Источник.


Ответ 2

Для соседних элементов:

.block1:hover + .block2 h1 { color: red;}


Для любых элементов(оба блока должны быть внутри одного элемента):



    .block1:hover ~ .block2 h1 { color: red;}

  
нет
  
Проведите надо мной
  
да
  

  
да
  

    
нет
  

нет


Ответ 3

.block:hover h1{
  color: blue;
}

  
zagolovok
  
zagolovok



Ответ 4

.s:hover~.d {
  color: red;
}
wow
hey


Ответ 5

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



.main:hover h2 {
  color: red;
}

How are you?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
Hi
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
Ok
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
So-so
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.





Если же нужно изменять стиль элемента, который находится выше элемента с псевдоклассо
:hover, то я делал так (размещал изменяемый элемент ниже элемента с псевдоклассом :hover и при помощи flexbox вытягивал его на нужное мне место):



.main {
  display: flex;
  flex-direction: column;
  font: 10px Arial, sans-serif;
  color: #333;
}
.one { order: -1; }
.two:hover ~ .one { color: red; }

How are you?
Hi
Ok
So-so



Ответ 6

Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь з
ошибки, если будут ;) Выше показанные примеры все правильные, но они очень ограничены
при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с JavaScript и он чень простой для усвоения. Главное не бойтесь использовать :)



function changeItem() {
  document.getElementById('one-two').style.width = '200px';
}// функция, которая сработает при наведении.
//она означает - выбрать элемент к Id у которого надо что-то изменить.
// когда в скобки где написано one-two добавите Id своего элемента
function rechangeItem() {
  document.getElementById('one-two').style.width = '100px';
}// тут всё также. но наобарот. протсес происходящий про отводе курсора.
#one, #two, #one-two {
  width: 100px;
  height: 30px;
  background: red;
  margin: 30px;
}
/*Надеюсь, что тут все понятно, заданы елементарные свойства :)*/



    
     


Ответ 7

div {


padding:20px;
background:#eee;
border:1px solid #ccc;
margin:10px;
}
.anotherdiv{
visibility:hidden;
opacity:0;
transition:all 1s;
}
.div:hover + .anotherdiv{
  visibility:visible;
  opacity:1;
}


Contrary to popular belief, Lorem Ipsum is not simply rando
text. It has roots in a piece of classical Latin literature from 45 BC, making it ove
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia
looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage
and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for thos
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.


Ответ 8

По сути, ответа на поставленый вопрос нет пока.

"Как при наведении на один элемент (hover) менять стили другого элемента css?" 

Видимо если элементы не соседние и не дочерние, то только скриптами.


Ответ 9

Здесь по классическому CSS за меня всё уже сказали, однако добавлю, что если Вы хотите писать так, как указали (цитирую):

.block:hover {  .block h1 { color: red;} }


Можете использовать препроцессоры CSS (SASS/LESS). 

Это так скажем усовершенствованный CSS, в котором помимо внутренних блоков можн
также использовать усовершенствованные переменные, вычисления и т.д.. Такие файлы компилируютс
препроцессором в оригинальный CSS, и к тому же сжимаются (минифицируются, убираются переносы и лишние пробелы, размер файла становится меньше). Достаточно интересная область, достойная внимания.