Çözüldü Hover ile başka bir elementi değiştirme

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
mahmutxd07

mahmutxd07

Decipat
Katılım
4 Kasım 2022
Mesajlar
1.061
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
Selam, hover yöntemi ile alt elementin, üst elementte veya başka bir elementte değişiklik yapmasını nasıl sağlayabiliriz?

JavaScript: 
<div id="myDiv" >
 Bu divin rengi değişecek.

 <button id="myButton">Hover</button>
</div>

JavaScript: 
<div id="myDiv1" >
 Bu divin rengi değişecek.

</div>
<div id="myDiv2" >
 Hover olacak

</div>

Eğer alt elemanı olsaydı.

CSS: 
#myDiv:hover #myButton{
 // gibi yazabilirdik.
}
 
Son düzenleme:
Çözüm
Kxaan
Birkaç farklı yolu var, addEventListener kullanarak yapmayı tercih ettim.
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="app.js" defer></script>
    <title>Technopat</title>
  </head>
  <body>
    <div id="div">Renk değişecek</div>
    <br />
    <div id="hoverDiv" style="width: 100px; height: 100px; background-color: aquamarine">
      Hover
    </div>
  </body>
</html>
JavaScript: 
const div = document.getElementById("div")
const hoverDiv = document.getElementById("hoverDiv")

hoverDiv.addEventListener("mouseenter", () => {
    div.style.backgroundColor = "gray"
})

hoverDiv.addEventListener("mouseout", () => {
    div.style.backgroundColor = "white"
})
Tarihe göre sırala Puana göre sırala
Birkaç farklı yolu var, addEventListener kullanarak yapmayı tercih ettim.
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="app.js" defer></script>
    <title>Technopat</title>
  </head>
  <body>
    <div id="div">Renk değişecek</div>
    <br />
    <div id="hoverDiv" style="width: 100px; height: 100px; background-color: aquamarine">
      Hover
    </div>
  </body>
</html>
JavaScript: 
const div = document.getElementById("div")
const hoverDiv = document.getElementById("hoverDiv")

hoverDiv.addEventListener("mouseenter", () => {
    div.style.backgroundColor = "gray"
})

hoverDiv.addEventListener("mouseout", () => {
    div.style.backgroundColor = "white"
})
 
Artı 0 Eksi
Çözüm
Kxaan dedi:
Birkaç farklı yolu var, addEventListener kullanarak yapmayı tercih ettim.
HTML: 
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <script src="app.js" defer></script>
 <title>Technopat</title>
 </head>
 <body>
 <div id="div">Renk değişecek</div>
 <br />
 <div id="hoverDiv" style="width: 100px; height: 100px; background-color: aquamarine">
 Hover
 </div>
 </body>
</html>
JavaScript: 
const div = document.getElementById("div")
const hoverDiv = document.getElementById("hoverDiv")

hoverDiv.addEventListener("mouseenter", () => {
 div.style.backgroundColor = "gray"
})

hoverDiv.addEventListener("mouseout", () => {
 div.style.backgroundColor = "white"
})
Genişletmek için tıkla...

Başka hangi yöntemleri kullanabiliriz? Birkaç örnek verir misiniz?
 
Artı 0 Eksi
www.w3schools.com

onmouseenter Event

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
www.w3schools.com

onmouseout Event

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Bu kullanımlara bakabilirsiniz.
 
Artı 0 Eksi

Benzer konular

Primearc
  • Çözüldü
Çözüldü  JavaScript'te elementin sonuna başka bir element ekleme
Mesaj
2
Görüntüleme
740
Primearc
Primearc
Merdione
  • Çözüldü
Çözüldü  CSS :hover çalışmıyor
2
Mesaj
16
Görüntüleme
537
Merdione
Merdione
Maraza25
CSS hover kullanımı
Mesaj
2
Görüntüleme
1B
isaeken
isaeken
P
Subdomaini başka bir URL adresine DNS ile yönlendirme
Mesaj
6
Görüntüleme
1B
playboinacruu
P
onekra
PHP ile servera başka bir severdan dosya indirme nasıl yapılır?
Mesaj
2
Görüntüleme
1B
onekra
onekra

Yeni konular

Yeni mesajlar

Geri
Yukarı