Есть такой код:
<div class="div1">
<div class="div11">Текст</div>
</div>
<div class="div2">
<div class="div12">Текст</div>
</div>
Как сделать так, чтобы при наведении на .div11 менялся фон div12. Верстку нельзя менять.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу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>
Никак, если использовать только 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>
Даже если строк куда больше (и без 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>
div
, а во втором случае изменён класс родителей.
<div class="div1">
? запрет на изменение разметки означает, скорее всего, что это уже работающий проект, и изменения могут повлечь за собой череду других нежелательных переделок. а классы даны в примере, наверняка, условно
.div1:hover~.div2 .div12 { background: tomato; }
, НО НЕ ТАК (этот код не сработает): .div11:hover~.div2 .div12 { background: tomato; }
css
/js
/ ... ? указание только тегаhtml
в вопросе не даёт этого понять.