Çö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.
2

249873

Kilopat
Katılım
17 Şubat 2019
Mesajlar
5.020
Çözümler
20
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üzenleyen: Moderatör:
Çözüm
zaer1n
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
zaer1n 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
1B
Primearc
Primearc
J
  • Çözüldü
Çözüldü  CSS :hover çalışmıyor
2
Mesaj
16
Görüntüleme
810
Jon1Snow
J
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ı