It is necessary that when pointing to the link " Online Store Aroha " the link " Online Store Solana " changed color.

Please tell me how to implement it?

enter image description here

Tried to do so:

.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
    As far as I understand, you can only do the opposite, when you hover on the first one, change the next one. And so - only through js - splash58
  • 2
    If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦
  • There is already a lot of options - we should accept some answer. - Qwertiy ♦

7 answers 7

 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>

  • What is the fundamental difference from this ? - Qwertiy ♦

I still contrived and made here such a miracle on CSS.
It works in Chrome, in FF and in IE11 too.

 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>

  • +1, flex learned a long time ago how to juggle with the order of the code, but doesn’t it seem like supporting such code is torture? In the fox works, and IE - i.stack.imgur.com/by43h.png - user207618
  • @Other, yes, I would not want to support this. I even managed to write while confused. IE you have some kind of old, judging by the fact that in it the markup of the SO itself went. In 11m it can earn (although it should be checked), and in 10m in any case, without adding ms'nykh prefixes (and the old syntax) it will not work. - Qwertiy ♦
  • @Other checked in IE11 works. - Qwertiy ♦
  • IE8 by default. I have never launched it on the working axis, this is his first time, so to speak. Hmm, launch, of course. - user207618
  • @Other, I came up with a simple option. See another answer. - Qwertiy ♦

For that matter, here's another option:

 #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/

But better with the help of JS (well, or jQuery, as you prefer):

 (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/

  • ABOUT! Cool with input. Although not invalid after all? - Qwertiy ♦
  • @Qwertiy, what makes you think that is not valid? Here , check for yourself - everything is valid. - Roman Grinyov
  • Strange. I expected that the attachment of active elements (label and link) to each other is not a null. - Qwertiy ♦
  1. If it is not important, then in html we change the links in some places.
  2. Using the direction: rtl; property direction: rtl; and table display, we pretend that no one has changed places.
  3. Apply the right selector and get the desired result.

 .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>

    Finally, it came to the conclusion that there are no spaces between the links. In this case, everything is elementary.

     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>

    And even simpler (although suitable only for the background and color of the text):

     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>

    • one
      Interesting, but perhaps you need to highlight one particular link? To highlight everything at once and to single out one, I still wanted to answer first, but this question arose, which was forbidden to ask laziness. - user207618
    • @Other, one has an answer about ltr . - Qwertiy ♦

    Manual

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

    To control the style of neighboring elements, the plus symbol (+) is used, which is placed between the two selectors E and F. Spaces around the plus are optional. 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 .

    It’s impossible to make css without crutches, you need to use js / jquery.

    UPD - jquery code sample

     $(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>

      Another option based on duplicate links. But this time is simple. Works with any number of links, and css does not depend on it.

      IE11 + and all other browsers. In earlier versions, the remaining links will not change the background.

       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>

      • This can already be called normal code. Although personally for my taste - it is a little ... shocking code; select an item when you hover - why touch the rest? Is that the epileptics the joy of blinking all the links to give. - user207618
      • @Other, he has some tabs with no padding ... Damn .. While I was writing this, it came out that in this case everything is decided in a simple way. Now I will write another answer ... In general, I wanted to say that there will not be flickering. - Qwertiy ♦
      • @Other, done. It was necessary to solve a problem that does not exist. I mean that repainting should not work when you hover between links. - Qwertiy ♦