v2.5.2
Giriş yap

CSS seçim

iamefe
559 defa görüntülendi
3 
<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
}
css html
Cevap yaz
Cevaplar (3)
tayfunerbilen
1043 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>
2
#005614
iamefe
1043 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.

0
#005615
makifgokce
1043 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;
}
1
#005613