Изменить фон div при наведении на другой

334

26 ноября 2016, 18:37

Есть такой код:

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

Как сделать так, чтобы при наведении на .div11 менялся фон div12. Верстку нельзя менять.

Answer 1

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>

Answer 2

Никак, если использовать только CSS - CSS правила действуют каскадно. Можно лишь через наведение на .div1, т.к. он на одном уровне с .div2.

Если через использование скриптов, то, например, вот так:

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

Answer 3

Даже если строк куда больше (и без 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>