Javascript Hover Birden Fazla Divde Problem Yaşıyorum

19-11-2017, 22:47:22

Merhaba arkadaşlar, javascript hakkında fazla bir bilgim yok. Bir noktada takıldım. Aşağıdaki kod ile resime ayrı başlığa ayrı stil veriyorum. 1 tane iken çalışıyor ama tekrarlayan div birden fazla olunca çalışmıyor. Yardımcı olmanızı rica ediyorum.

$('#elm').hover( function(){ $(this).addClass('hover') var element = document.getElementById("urun-adi"); element.classList.add("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.add("hoverresim"); }, function(){ $(this).removeClass('hover') var element = document.getElementById("urun-adi"); element.classList.remove("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.remove("hoverresim"); } )

<div id="elm" class="col-md-3 yaziortala"> <div class="single-product-image-cat"> <a href="#"> <img id="urun-resim" style="padding: 5px" src="http://www.benimsunucum.net/sites/pakmaya/wp-content/themes/pakmaya/ResimMotoru.php?src=http://www.benimsunucum.net/sites/pakmaya/wp-content/uploads/2014/12/Confessions_chef.jpg&w=300&h=300&zc=1" class="img-responsive" /> </a> </div> <div class="single-product-info"> <a href="#"> <h4 id="urun-adi" style="margin-bottom: 0px; font-weight: bold; padding-bottom: 5px; color: #000;">DEAKTİVE MAYA</h4> <small style="color: #8c8c8c; font-weight: bold;">500 gr</small> </a> </div> </div>

19-11-2017, 23:06:21

#2

dev

Kurumsal Üye

celalyesil adlı üyeden alıntı: mesajı görüntüle

Merhaba arkadaşlar, javascript hakkında fazla bir bilgim yok. Bir noktada takıldım. Aşağıdaki kod ile resime ayrı başlığa ayrı stil veriyorum. 1 tane iken çalışıyor ama tekrarlayan div birden fazla olunca çalışmıyor. Yardımcı olmanızı rica ediyorum.

$('#elm').hover( function(){ $(this).addClass('hover') var element = document.getElementById("urun-adi"); element.classList.add("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.add("hoverresim"); }, function(){ $(this).removeClass('hover') var element = document.getElementById("urun-adi"); element.classList.remove("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.remove("hoverresim"); } )
<div id="elm" class="col-md-3 yaziortala"> <div class="single-product-image-cat"> <a href="#"> <img id="urun-resim" style="padding: 5px" src="http://www.benimsunucum.net/sites/pakmaya/wp-content/themes/pakmaya/ResimMotoru.php?src=http://www.benimsunucum.net/sites/pakmaya/wp-content/uploads/2014/12/Confessions_chef.jpg&w=300&h=300&zc=1" class="img-responsive" /> </a> </div> <div class="single-product-info"> <a href="#"> <h4 id="urun-adi" style="margin-bottom: 0px; font-weight: bold; padding-bottom: 5px; color: #000;">DEAKTİVE MAYA</h4> <small style="color: #8c8c8c; font-weight: bold;">500 gr</small> </a> </div> </div>

Eğer "<div id="elm"" ike başlayan kısmı koyala yapıştır yapıyorsan sıkıntı orada. "id" ler uniqu olmalı.

19-11-2017, 23:12:01

#3

celalyesil

Meftun adlı üyeden alıntı: mesajı görüntüle

Eğer "<div id="elm"" ike başlayan kısmı koyala yapıştır yapıyorsan sıkıntı orada. "id" ler uniqu olmalı.

Aynen hocam kopyala yapıştır yapıyorum html bir sayfa olduğu için. İdyi benzersiz yaparım sıkıntı yok ama tek js koduyla nasıl yapabilirim?

19-11-2017, 23:17:46

#4

truser

Selamlar hocam dener misiniz?

$('.elm').hover( function(){ $(this).addClass('hover') var element = document.getElementById("urun-adi"); element.classList.add("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.add("hoverresim"); }, function(){ $(this).removeClass('hover') var element = document.getElementById("urun-adi"); element.classList.remove("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.remove("hoverresim"); } )

<div class="col-md-3 yaziortala elm"> <div class="single-product-image-cat"> <a href="#"> <img id="urun-resim" style="padding: 5px" src="http://www.benimsunucum.net/sites/pakmaya/wp-content/themes/pakmaya/ResimMotoru.php?src=http://www.benimsunucum.net/sites/pakmaya/wp-content/uploads/2014/12/Confessions_chef.jpg&w=300&h=300&zc=1" class="img-responsive" /> </a> </div> <div class="single-product-info"> <a href="#"> <h4 id="urun-adi" style="margin-bottom: 0px; font-weight: bold; padding-bottom: 5px; color: #000;">DEAKTİVE MAYA</h4> <small style="color: #8c8c8c; font-weight: bold;">500 gr</small> </a> </div> </div>

20-11-2017, 09:16:36

#5

celalyesil

truser adlı üyeden alıntı: mesajı görüntüle

Selamlar hocam dener misiniz?

$('.elm').hover( function(){ $(this).addClass('hover') var element = document.getElementById("urun-adi"); element.classList.add("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.add("hoverresim"); }, function(){ $(this).removeClass('hover') var element = document.getElementById("urun-adi"); element.classList.remove("hoverisim"); var element = document.getElementById("urun-resim"); element.classList.remove("hoverresim"); } )
<div class="col-md-3 yaziortala elm"> <div class="single-product-image-cat"> <a href="#"> <img id="urun-resim" style="padding: 5px" src="http://www.benimsunucum.net/sites/pakmaya/wp-content/themes/pakmaya/ResimMotoru.php?src=http://www.benimsunucum.net/sites/pakmaya/wp-content/uploads/2014/12/Confessions_chef.jpg&w=300&h=300&zc=1" class="img-responsive" /> </a> </div> <div class="single-product-info"> <a href="#"> <h4 id="urun-adi" style="margin-bottom: 0px; font-weight: bold; padding-bottom: 5px; color: #000;">DEAKTİVE MAYA</h4> <small style="color: #8c8c8c; font-weight: bold;">500 gr</small> </a> </div> </div>

Maalesef hocam hiçbir tepki yok bu kodda. Verdiğiniz kodu birebir yazdım.

Yardımcı olabilecek kimse yok mudur?