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

#html #css

Необходимо, чтобы при наведение на ссылку "Интернет магазин Арога" ссылка "Интернет
магазин Солана" меняла цвет.

Подскажите пожалуйста как это реализовать?



Пытался сделать так:



.sbm_top_link:nth-child(2):hover + .sbm_top_link a {
  color: #222222;
  background: #333333;
}

  Интернет магазин Солана 
  Интернет магазин Арога




    

Ответы

Ответ 1

ul {
    margin: 15px 0;
    text-align: center;
    font-size: 0;
}

ul > li {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

ul > li > a {
    display: block;
    text-decoration: none;
    padding: 10px 15px;
    background: #ccc;
    color: #555;    
}

ul:hover > li > a {
    background: #000;
    color: #fff;
}

ul > li > a:hover {
    background: #999;
}

    
Интернет магазин Солана
    
Интернет магазин Арога



Ответ 2

Я всё-таки исхитрился и сделал вот такое чудо на CSS.
В Хроме работает, в FF и в IE11 - тоже.



div {
  display: flex;
}

a {
  background: antiquewhite;
  margin: .5em;
  padding: .5em;
}

.a1 { order: 1; }
.a2 { order: 2; }
.a1a, .a2a { position: absolute; }

a:hover { background: aquamarine; }
a:hover ~ a { background: silver; }
.a2:hover ~ .a1 { z-index: 1; }
.a1:hover ~ .a2 { z-index: 1; }

  Интернет магазин Арога
  Интернет магазин Солана 
  Интернет магазин Арога
  Интернет магазин Солана 



Ответ 3

Раз на то пошло, то вот ещё вариант:



#test {
  border: 0;
  height: 0;
  width: 0;
}

#test:hover + a {
  color: red;
}

  
  Интернет магазин Солана
  
  
    
    Интернет магазин Арога
    
  
  





https://jsfiddle.net/482y1c53/



Но лучше с помощью JS (ну или JQuery, как вам удобней):



(function () {

    var aroga = document.querySelector('.sbmts_bl :nth-child(2)');

    var solanaClassList = aroga.previousElementSibling.classList;

    aroga.addEventListener('mouseover', function () {

        solanaClassList.add('hightlight');

    });

    aroga.addEventListener('mouseout', function () {

        solanaClassList.remove('hightlight');

    });

})();
.sbm_top_link:nth-child(2):hover + .sbm_top_link a {
  color: #222222;
  background: #333333;
}

.hightlight {
  color: red;
}

  Интернет магазин Солана 
  Интернет магазин Арога





https://jsfiddle.net/pco94ys2/


Ответ 4

Если не принципиально, то в html меняем ссылки местами.
С помощью свойства direction: rtl; и табличного отображения, делаем вид, что никто
ни с кем местами и не менялся.
Применяем нужный селектор и получаем необходимый результат.




.sbmts_bl {
  border: 2px solid black;
}
.sbmts-bl__wrapper {
  border: 3px solid green;
  width: 400px;
  height: 40px;
  font-size: 0.8em;
  display: table;
  direction: rtl;
  margin-left: 50px;
}
.sbm_top_link {
  display: table-cell;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
}
.sbm_top_link:nth-child(1):hover + .sbm_top_link {
  color: white;
  background: black;
}

  

    Интернет магазин Арога
    Интернет магазин Солана 
  



Ответ 5

Наконец-то дошло, что отступов между ссылками нет. В таком случае всё элементарно.



nav {
  background: #777;
  padding: 0 3em;
}

div {
  display: inline-block;
}

a {
  display: inline-block;
  background: antiquewhite;
  padding: .5em;
}

div:hover a:hover {
  background: aquamarine;
}

div:hover a {
  background: silver;
}

  

    
      Интернет магазин Солана
    
      Интернет магазин Арога
    
      И ещё один
    
  





И даже ещё проще (хотя подойдёт только для фона и цвета текста):



nav {
  background: #777;
  padding: 0 3em;
}

div {
  display: inline-block;
  background: antiquewhite;
}

a {
  display: inline-block;
  padding: .5em;
}

div:hover {
  background: silver;
}

a:hover {
  background: aquamarine;
}

  

    
      Интернет магазин Солана
    
      Интернет магазин Арога
    
      И ещё один
    
  



Ответ 6

Мануал

E + F { Описание правил стиля }



  Для управления стилем соседних элементов используется символ плюса
  (+), который устанавливается между двумя селекторами E и F. Пробелы
  вокруг плюса не обязательны. Стиль при такой записи применяется к
  элементу F, но только в том случае, если он является соседним для
  элемента E и следует сразу после него.


Сделать через css без костылей не получится, Вам необходимо воспользоваться js/jquery.

UPD - пример кода на jquery



$(function() {
  $(".sbm_top_link:nth-child(2)").hover(
    function() {
      $(".sbm_top_link:nth-child(1)").addClass('test');
    },
    function() {
      $(".sbm_top_link:nth-child(1)").removeClass('test');
    }
  )
});
.test {
  color: #222222;
  background: #333333;
}


  Интернет магазин Солана  
  Интернет магазин Арога



Ответ 7

Ещё один вариант, основанный на дублировании ссылок. Но на этот раз простой. Работает
с любым числом ссылок, причём css от этого не зависит.

IE11+ и все остальные браузеры. В более ранних остальные ссылки не будут менять фон.



nav {
  position: relative;
}

a {
  display: inline-block;
  background: antiquewhite;
  margin: .5em;
  padding: .5em;
  position: relative;
  z-index: 0;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

a:hover {
  background: aquamarine;
  z-index: 1;
}

a:hover ~ div a {
  background: silver;
}

  Интернет магазин Солана
  Интернет магазин Арога
  Ещё какой-то интернет-магазин
  И ещё один
  Да много их
  Очень много
  

    Интернет магазин Солана
    Интернет магазин Арога
    Ещё какой-то интернет-магазин
    И ещё один
    Да много их
    Очень много