Good day. Who knows how to change the properties of an element when hover to the next. Here is a sample code:

 /*вот стили(это scss)*/ .nav__list { list-style: none; width: 100%; text-align: justify; &:after { content: ""; display: inline-block; width: 100%; height: 0; } } .nav__item { display: inline-block; position: relative; } .nav__link { color: rgba(255, 255, 255, 0.5); background: transparent; font-family: "OpenSans-Bold", sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; text-decoration: none; padding: 5px 7px; transition: all 0.3s; &:hover { color: rgba(255, 255, 255, 1); background: red; } } .nav__drop_list { // background: rgba(0,0,0, 0.7); background: red; position: absolute; top: 100%; text-align: left; width: 165px; z-index: 100; display: none; transition: all 0.3s; &-w1 { width: 185px; } &-w2 { width: 210px; } &+.nav__link { background: red; } } .nav__drop_item { margin-bottom: 2px; } .nav__drop_link { color: rgba(255, 255, 255, 1); font-family: "OpenSans-bold", sans-serif; display: block; font-size: 12px; letter-spacing: 1.5px; padding: 7px 15px 7px 10px; text-decoration: none; text-transform: uppercase; transition: all 0.3s; } .nav__item:hover .nav__drop_list { display: block; } .nav__drop_list:hover+.nav__link { background: red; color: rgba(255, 255, 255, 1); } 
 <ul class="nav__list"> <li class="nav__item"> <a href="#" class="nav__link" id="nav__link">Спорт</a> <ul class="nav__drop_list" id="nav__drop_list"> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Пресс</a></li> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Спина</a></li> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Ягодицы</a></li> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Ноги</a></li> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Руки</a></li> </ul> </li> <li class="nav__item"> <a href="#" class="nav__link">Питание</a> <ul class="nav__drop_list nav__drop_list-w1"> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Рецепты</a></li> <li class="nav__drop_item"><a href="#" class="nav__drop_link">Рацион</a></li> </ul> </li> </ul>

When hover on the drop-down menu - .nav__drop_list is .nav__drop_list change the background of .nav__link . I tried it via js or via .nav__drop_list:hover + .nav__link , but without success.
What could be the problem?

  • + acts on the next element, and in your layout .nav__link preceded by .nav__drop_list:hover , therefore CSS did not work. Show the script that you tried to link them with. - Gleb Kemarsky
  • added styles. I also tried using js like this (though clumsily - var bg = document.getElementById ('nav__link'); document.getElementById ('nav__drop_list'). AddEventListener ("mouseover", function () {bg.style.background = "# ff0000", bg.style.color = "#fff"; this.addEventListener ("mouseout", function () {bg.style.background = "transparent";});}); - Deniskins
  • Aydishniki just added more to the elements - Deniskins

3 answers 3

+ acts on the next element, and in your layout .nav__link preceded by .nav__drop_list , so the CSS did not work.

https://webref.ru/css/selector/adjacent

E + F { Описание правил стиля }
The style with such a record is applied to the F element, but only if it is adjacent to the E element and immediately follows it.

You have both blocks inside .nav__item . You can use this:

 .nav__item:hover .nav__link { ... }
  • Thank you bro! I somehow did not even think in that direction. Everything is working. +1 to the aura of good to you! -) - Deniskins

 document.querySelector('.nav__drop_list').addEventListener('mouseenter', function(){ document.querySelector('.nav__item').style.background = 'red' }) document.querySelector('.nav__drop_list').addEventListener('mouseout', function(){ document.querySelector('.nav__item').style.background = 'transparent' }) 
 <li class="nav__item"> nav__item </li> <ul class="nav__drop_list"> nav__drop_list </ul>

CSS option

 .nav__drop_list:hover~.nav__item { background: red; } /* css такое можно реализовать только если изменяемый элемент находиться ниже*/ .nav__item:hover~.nav__drop_list { background: green; } 
 <li class="nav__item"> nav__item </li> <ul class="nav__drop_list"> nav__drop_list </ul>

  • It is also an option. Although naked css will be more correct to me. But thanks for responding - Deniskins
  • Well, you said ...)))) Naked CSS is not implemented either as - Air
  • If there are several pairs of such blocks on a page, then the script will repaint everything .nav__item when you hover over any of the .nav__drop_list . - Gleb Kemarsky 4:08 pm
  • After all, but it turned out. Added .nav__item: hover .nav__link and everything works as it should - Deniskins
  • @GlebKemarsky, haven't you heard anything about cycles ...? ))) - Air

CSS styles can act on the element itself:

 .nav__drop_list {..}

on his children:

 .nav__drop_list .nav__drop_link {...}

and on his "younger brothers" ("neighbors"), I mean elements that are children of the same guy and are AFTER this element:

 .nav__drop_list + .foo {...} .nav__drop_list ~ .bar {...}

Your same .nav__link element for this genealogical classification is a “big brother” for the .nav__drop_list element and cannot be affected by CSS. So either javascript, or make a feint with ears like this:

  1. swap .nav__drop_list and .nav__link
  2. attach the style .nav__drop_list:hover + .nav__link {...}
  3. arrange both elements visually in the desired order using flex-order
  • Thanks for the answer, but flexs won't suit me here .. There are reasons for styling related. Otherwise, that's right, I just forgot something about these basics .. - Deniskins