CSS seçim

iamefe 1386 gün önce

701 defa görüntülendi

<div class="purpose"></div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS'de container icindeki bir div'e hover olduğunda purpose'un style'ini değiştirmek istiyorum ama nasıl seçeceğimi bilmiyorum.

.container div:hover "purpose gelecek" {
    style
}

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (3)

tayfunerbilen

1386 gün önce

css'de parent'ı ya da öncesini seçme durumu olmadığı için yapamazsın :) jquery ile şöyle bir şey yapabilirsin

<div class="purpose">başka bir div</div>
<div class="container">
    <div>1. div</div>
    <div>2. div</div>
    <div>3. div</div>
</div>

<style>
.purpose.active {
	background-color: lime;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.container div').on('mouseover', function() {
	$('.purpose').addClass('active');
}).on('mouseleave', function() {
	$('.purpose').removeClass('active');
});
</script>

#005614

iamefe

1386 gün önce

İkiside doğru ancak birkaç defa kullanılması gerekebilir diye şu şekilde yaptım:

const content = document.querySelector('.iAmContent')
const hover = (el) => {
  el.addEventListener('mouseenter',() => cursor.classList.toggle('active'))
}
const nothover = (el) => {
  el.addEventListener('mouseleave',() => cursor.classList.toggle('active'))
}
hover(content)
nothover(content)

@makifgokce @tayfunerbilen teşekkürler.

#005615

makifgokce

1386 gün önce

purpose altta olsaydı

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="purpose"></div>

şöyle seçebilirdin.

div.container:hover + div.purpose {
	background: rebeccapurple;
	padding: 10px;
}
.purpose{
	background: yellow;
}

#005613