<div class="test1"></div> <div class="test3"></div> <div class="test3"></div>

How test 3 on test 1 affect? with hover? no + no ~ does not help

  • four
    And where did you get that in css you can influence blocks that are not related to each other (child)? what you want to do through CSS won't work, you can do it via JS / JQuery - Arsen
  • Here JS, the best option. - LFC

2 answers 2

Well, depending on the structure, you can try through flex + order

 .test { display: flex; flex-wrap: wrap; } .test1 { order: -2; } .test3, .test1 { width: 100%; background: gray; margin-bottom: 2px; } .test3:hover ~ .test1 { background: orange; } 
 <div class="test"> <div class="test3">test3</div> <div class="test3">test3</div> <div class="test1">test1</div> </div>

Otherwise, only through js

  • It does not work ( viniry.kz in the header there is a down arrow and now the block from below should aim to block the block from above but alas when pointing to vc_row: hover ~ .phones1 {display: none;} does not work on the block above this thingҰ - Anuar
  • it is not clear what you write. Put punctuation marks. - Yuri Kopot

The only adequate way is JS , or using the jQuery library.

 function getClass(c) { return document.getElementsByClassName(c)[0]; } let jsFirst = getClass("js-first"), jsThirst = getClass("js-thirst"), jqueryFirst = getClass("jQuery-first"), jqueryThirst = getClass("jQuery-thirst"); function hover(elem, aim) { elem.addEventListener('mouseover', function(e) { aim.classList.add("hover"); }); elem.addEventListener('mouseout', function(e) { aim.classList.remove("hover"); }); } $('.jQuery-first').hover(function(e) { $('.jQuery-thirst').addClass("hover"); }, function(e) { $('.jQuery-thirst').removeClass("hover"); }) hover(jsFirst, jsThirst); 
 *, *:before, *:after {box-sizing: border-box;} body, p, figure, h1, h2, h3, h4, h5, h6 {margin: 0;} ul, ol, dl, li, menu{ margin: 0; padding: 0; list-style: none; } body { display: flex; justify-content: space-around; } .container { display: flex; flex-direction: column; align-items: center; } .native-js { margin-bottom: 20px; } .title { padding: 10px; margin-bottom: 10px; font-weight: bold; font-size: 18px; } .elem { padding: 20px; background: #411; color: #fff; } .elem:not(:last-child) { margin-bottom: 10px; } .hover { background: #241; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="native-js container"> <span class="title">JS</span> <div class="js-first elem">Наведи на меня</div> <div class="js-second elem">2</div> <div class="js-thirst elem">3</div> </div> <div class="jQuery container"> <span class="title">jQuery</span> <div class="jQuery-first elem">Наведи на меня</div> <div class="jQuery-second elem">2</div> <div class="jQuery-thirst elem">3</div> </div>