31

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

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

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

10 ответов 10

41

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

.section:hover .layer {
  border: 2px solid #F90;
}
<div class="section">
  <img src="https://i.pinimg.com/originals/2d/93/77/2d93772ccc2486cb04c45d712b14966b.png" />
  <div class="layer">Lorem Ipsum</div>
</div>

Источник.

28

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

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

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

    .block1:hover ~ .block2 h1 { color: red;}
<div>
  <div class=block2><h1>нет</h1></div>
  <div class=block1>Проведите надо мной</div>
  <div class=block2><h1>да</h1></div>
  <hr>
  <div class=block2><h1>да</h1></div>
  <div>
    <div class=block2><h1>нет</h1></div>
  </div>
</div>
<div class=block2><h1>нет</h1></div>

5
  • И block2 должен идти после block1
    – sercxjo
    18 дек 2015 в 21:17
  • Добавил сниплет-пример если не возражаете
    – sercxjo
    18 дек 2015 в 21:36
  • Работает только если менять блоки местами, а это не всегда удобно.
    – I_CaR
    25 авг 2018 в 18:45
  • так заработает тот что глубже ".block1:hover ~ div .block2 h1 { color: red;}" codepen.io/woodsleaf/pen/PryOjg
    – woodsleaf
    8 июл 2019 в 0:30
  • то есть, внешний блок нереально стилизовать?
    – user282402
    15 сен 2019 в 10:08
7

.s:hover~.d {
  color: red;
}
<div class="s">wow</div>
<div class="d">hey</div>

7

Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь за ошибки, если будут ;) Выше показанные примеры все правильные, но они очень ограничены, при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с 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;
}
/*Надеюсь, что тут все понятно, заданы елементарные свойства :)*/
<div id="one" onmouseover="changeItem()" onmouseout="rechangeItem()"></div>
<div id="two"></div>
<div id="one-two"></div>
    <!-- Тут 3 элемента, так как с соседними показывали, я покажу с другими, третий(который по середине, нам для пояснения, что пример не над соседними элементами-->
     <!-- onmouseover, onmouseout означают события: курсор наведен на элемент и курсор отошел от элемента соответственно, к этим элементам прикреплены простые функции -->

4

.block:hover h1{
  color: blue;
}
<div class="block">
  <div><h1>zagolovok</h1></div>
  <div><h1>zagolovok</h1></div>
</div>

4

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

.main:hover h2 {
  color: red;
}
<div class="main">
<h2 class="two">How are you?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.</p>
<h2 class="one">Hi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.</p>
<h2 class="three">Ok</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.</p>
<h2 class="four">So-so</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.</p>
</div>

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

.main {
  display: flex;
  flex-direction: column;
  font: 10px Arial, sans-serif;
  color: #333;
}
.one { order: -1; }
.two:hover ~ .one { color: red; }
<div class="main">
<h2 class="two">How are you?</h2>
<h2 class="one">Hi</h2>
<h2 class="three">Ok</h2>
<h2 class="four">So-so</h2>
</div>

4

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;
}
<div class="div"></div>

<div class="anotherdiv">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 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 those 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.</div>

0

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

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

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

2
  • 1
    Вот вам пример когда элементы и не соседние и не дочерние: jsfiddle.net/7pmdbu3n. А по теме вопрос, автор уточнил после вопроса, что он хотел и ему всё верно ответили.
    – MasterAlex
    11 дек 2014 в 8:14
  • 2
    В приведенной вами примере элементы как раз соседние, да и автор не уточнил вопрос а привел пример.
    – kosost
    12 дек 2014 в 3:38
0

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

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

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

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

0
<styles>
#container-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: rgb(29, 29, 29);
}

#item-header {
  transition: 0.5s ease;
  cursor: pointer;
  color: white;
  padding: 15px;
  font-size: small;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


#item-header:hover{
  transition: 0.5s;
  color: rgb(255, 149, 149);
}


.cube1 {
  transition: 0.5s;
  position: absolute;
  transform: translateY(31px);
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 15px;
  box-shadow: 0 0 0 0 #088177;
}

header #item-header:hover .cube1{
  transition: 0.5s;
  background-color: #088177;
  transform: translateY(61px);
  box-shadow: 0 0 10px 1px #088177;
}

</styles>

<header>
            <div id='container-header'>
              <span id='item-header'><h1>дискорд</h1> <p className='cube1'></p> </span>
              <span id='item-header'><h1>обновление</h1> <p className='cube1'></p> </span>
              <span id='item-header'><h1>информация</h1> <p className='cube1'></p> </span>
              <span id='item-header'><h1></h1> <p className='cube1' ></p> </span>
            </div>
          </header>
1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 11 авг 2022 в 19:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.