There is such code:

<div class="div1"> <div class="div11">Текст</div> </div> <div class="div2"> <div class="div12">Текст</div> </div>

How to make it so that when you hover on .div11, the background of div12 changes. Layout can not be changed.

  • 2
    What technologies are allowed to solve the problem? css / js / ...? specifying only the html tag in the question does not make it clear. - lexxl

3 answers 3

 var div11 = document.querySelector('.div11'); var div12 = document.querySelector('.div12'); div11.addEventListener('mouseover', handle); div11.addEventListener('mouseleave', handle2); function handle() { div12.style.background = 'lightgreen'; } function handle2() { div12.style.background = ''; } 
 <div class="div1"> <div class="div11">Текст</div> </div> <div class="div2"> <div class="div12">Текст</div> </div>

  • Thank. Your answer is best suited. There are about 20-30 such divs. and all with different classes. - Victoria

No, if you use only CSS - CSS rules are cascading. It is possible only through the guidance on .div1 , because It is on par with .div2 .

If through the use of scripts, for example, like this:

 $('.div11').hover( function() { $('.div12').css('background', 'green') }, function() { $('.div12').css('background', 'transparent') } ) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="div1"> <div class="div11">Текст</div> </div> <div class="div2"> <div class="div12">Текст</div> </div>

  • See my answer. - smellyshovel

Even if there are more lines (and without JavaScript):

 div[class^="div"]:hover + div[class^="div"] > div { background: lime; } 
 <div class="div1"> <div class="div11">Текст</div> </div> <div class="div2"> <div class="div12">Текст</div> </div> <div class="div3"> <div class="div13">Текст</div> </div> <div class="div4"> <div class="div14">Текст</div> </div> <div class="div5"> <div class="div15">Текст</div> </div> <div class="div6"> <div class="div16">Текст</div> </div>

  • The author indicated that the markup can not be changed. so the answer does not correspond to the question, unfortunately: in the first case, it is not the internal, but the external div that is colored, and in the second case, the class of parents is changed. - lexxl
  • @lexxl and so? :) - smellyshovel
  • so. where is the <div class="div1"> ? the ban on changing the markup means, most likely, that this is already a working project, and changes may entail a series of other undesirable rework. and the classes are given in the example, for sure, conditionally - lexxl
  • one
    that's not the point) if I'm right and the classes are given for clarity, then this question can be rephrased like this: <div class = "father"> <div class = "boy"> Text </ div> </ div> and < div class = "mother"> <div class = "girl"> Text </ div> </ div> - lexxl
  • one
    Before you clever and say that it is possible to solve it without js, rewrite your css adequately !!! This will work if you write a condition like this (your condition is in normal form): .div1:hover~.div2 .div12 { background: tomato; } .div1:hover~.div2 .div12 { background: tomato; } , BUT NOT SO (this code will not work): .div11:hover~.div2 .div12 { background: tomato; } .div11:hover~.div2 .div12 { background: tomato; } - HamSter