8

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

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

введите сюда описание изображения

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

.sbm_top_link:nth-child(2):hover + .sbm_top_link a {
  color: #222222;
  background: #333333;
}
<div class="sbmts_bl">
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Солана </a>
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Арога</a>
</div>

3
  • 3
    насколько я понимаю, можно только наоборот, при наведении на первый менять следующий. А так - только через js
    – splash58
    7 мая 2016 в 20:35
  • 2
    Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 8 мая 2016 в 8:01
  • Тут уже уйма вариантов - надо бы принять какой-нибудь ответ.
    – Qwertiy
    11 мая 2016 в 20:48

8 ответов 8

5

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;
}
<ul>
    <li><a href="#">Интернет магазин Солана</a></li>
    <li><a href="#">Интернет магазин Арога</a></li>
</ul>

1
  • В чём принципиальное отличие от этого?
    – Qwertiy
    8 мая 2016 в 12:14
3

Я всё-таки исхитрился и сделал вот такое чудо на 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; }
<div>
  <a class="a2 a2a" href="#">Интернет магазин Арога</a>
  <a class="a1 a1a" href="#">Интернет магазин Солана </a>
  <a class="a2 a2b" href="#">Интернет магазин Арога</a>
  <a class="a1 a1b" href="#">Интернет магазин Солана </a>
</div>

5
  • +1, flex давно научился жонглировать порядком кода, только не кажется ли что такой код поддерживать - мучение? В лисе работает, а IE - i.stack.imgur.com/by43h.png
    – user207618
    7 мая 2016 в 20:59
  • @Other, да, поддерживать это мне бы не хотелось. Я даже пока писал успел запутаться. IE у тебя какой-то старый, судя по тому, что в нём разметка самого SO поехала. В 11м может заработать (хотя надо проверять), а в 10м в любом случае, без добавления ms'ных префиксов (и старого синтаксиса) не заработает.
    – Qwertiy
    7 мая 2016 в 21:02
  • @Other, проверил, в IE11 работает.
    – Qwertiy
    7 мая 2016 в 21:05
  • IE8 по дефолту. Я его ни разу не запускал на рабочей оси, это, так сказать, его первый раз. Хм, запуска, конечно.
    – user207618
    7 мая 2016 в 21:06
  • @Other, я придумал простой вариант. См. другой ответ.
    – Qwertiy
    7 мая 2016 в 22:14
2

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

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

#test:hover + a {
  color: red;
}
<div class="parent">
  
  <input id="test"><a class="solana" href="#">Интернет магазин Солана</a>
  
  <label for="test">
    
    <a class="aroga" href="#">Интернет магазин Арога</a>
    
  </label>
  
</div>

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;
}
<div class="sbmts_bl">
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Солана </a>
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Арога</a>
</div>

https://jsfiddle.net/pco94ys2/

3
  • О! Круто с инпутом. Хотя и невалидно ведь?
    – Qwertiy
    7 мая 2016 в 21:54
  • @Qwertiy, c чего вы взяли, что невалидно? Вот, проверьте сами — всё валидно. 8 мая 2016 в 7:57
  • Странно. Я ожидал, что вложение активных элементов (label и ссылка) друг в друга невалино.
    – Qwertiy
    8 мая 2016 в 11:03
2
  1. Если не принципиально, то в html меняем ссылки местами.
  2. С помощью свойства direction: rtl; и табличного отображения, делаем вид, что никто ни с кем местами и не менялся.
  3. Применяем нужный селектор и получаем необходимый результат.

.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;
}
<div class="sbmts_bl">
  <div class="sbmts-bl__wrapper">
    <a class="sbm_top_link fancybox" href="#">Интернет магазин Арога</a>
    <a class="sbm_top_link fancybox" href="#">Интернет магазин Солана </a>
  </div>
</div>

2

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

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>
  <div>
    <a href="#">
      Интернет магазин Солана
    </a><a href="#">
      Интернет магазин Арога
    </a><a href="#">
      И ещё один
    </a>
  </div>
</nav>

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

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;
}
<nav>
  <div>
    <a href="#">
      Интернет магазин Солана
    </a><a href="#">
      Интернет магазин Арога
    </a><a href="#">
      И ещё один
    </a>
  </div>
</nav>

2
  • 1
    Интересно, но возможно нужно подсветить именно одну, особую, ссылку? Подсвечивать всё разом и одну выделять я ещё первым хотел ответить, но возник этот вопрос, который спрашивать лень запретила.
    – user207618
    8 мая 2016 в 1:50
  • @Other, на одну есть ответ про ltr.
    – Qwertiy
    8 мая 2016 в 4:19
1

Мануал

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sbmts_bl">
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Солана </a>&nbsp;
  <a class="sbm_top_link fancybox" href="#">Интернет магазин Арога</a>
</div>

0

Ещё один вариант, основанный на дублировании ссылок. Но на этот раз простой. Работает с любым числом ссылок, причём 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;
}
<nav>
  <a href="#">Интернет магазин Солана</a>
  <a href="#">Интернет магазин Арога</a>
  <a href="#">Ещё какой-то интернет-магазин</a>
  <a href="#">И ещё один</a>
  <a href="#">Да много их</a>
  <a href="#">Очень много</a>
  <div>
    <a href="#">Интернет магазин Солана</a>
    <a href="#">Интернет магазин Арога</a>
    <a href="#">Ещё какой-то интернет-магазин</a>
    <a href="#">И ещё один</a>
    <a href="#">Да много их</a>
    <a href="#">Очень много</a>
  </div>
</nav>

3
  • Вот это уже можно назвать нормальным кодом. Хотя лично на мой вкус - это слегка... эпатажный код; выделять пункт при наведении - зачем остальные трогать? Разве что эпилептикам радость моргания всех ссылок подарить.
    – user207618
    7 мая 2016 в 23:13
  • @Other, у него-то табы без отступов... Блин.. Пока писал это, дошло, что в том случае всё вообще элементарно решается. Сейчас ещё ответ напишу... А вообще, я хотел сказать, что там мерцания не будет.
    – Qwertiy
    7 мая 2016 в 23:36
  • @Other, готово. Это ж надо было решать проблему, которой нет. Я про то, что перекрашивание не должно срабатывать при наведении между ссылками.
    – Qwertiy
    7 мая 2016 в 23:43
0

Интересная модификация соседнего ответа для случая, когда между ссылками всё-таки нужен зазор. Суть в том, что div:hover должен срабатывать только тогда, когда на одного из его потомков навели мышку, но не срабатывать, когда навели на него самого. Очевидно, что pointer-events для этого не подходит. А вот display: contents отлично работает. Ну и для старых браузеров можно добавить в качестве фоллбэка display: inline-block и там подсветка будет работать чуть хуже.

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

div {
  display: inline-block;
  display: contents;
}

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

a + a {
  margin-left: 1em;
}

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

div:hover a {
  background: silver;
}
<nav>
  <div>
    <a href="#">
      Интернет магазин Солана
    </a><a href="#">
      Интернет магазин Арога
    </a><a href="#">
      И ещё один
    </a>
  </div>
</nav>

Ваш ответ

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

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