Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

Css Hover ile Üst Etiketlere Ulaşma (Çözüldü)

 10 Mesajlar 2.676 Okunma
lstbozum
tr.link

#1
sillyman sillyman WM Aracı Kullanıcı
  • Üyelik 12.04.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğretmen
  • Konum İzmir
  • Ad Soyad T** U**
  • Mesajlar 191
  • Beğeniler 40 / 38
  • Ticaret 1, (%100)
Merhaba arkadaşlar bugün aklıma takıldı sizlere sorayım dedim.
Hemen kodları paylaşıyorum.
Html:

Değiş

Css:

.renk{
width:400px;
height:50px;
background:red;
}
.deg{
width:50px;
height:50px;
background:green;
}
.deg:hover .renk{
background:yellow;
}


Kodlardan da anlayacağınız gibi divler birbirlerini kapsamıyor. Hover özelliği ile üst veya bağlantısız bir dive ya da nesneye ulaşmak istiyorum nasıl yapılacağı hakkında bir fikri olan var mı ?
 

 

wmaraci
reklam

#2
Nogitsun Nogitsun Nogitsun.com Kullanıcı
  • Üyelik 18.11.2015
  • Yaş/Cinsiyet 29 / E
  • Meslek .NET Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Y**
  • Mesajlar 232
  • Beğeniler 32 / 75
  • Ticaret 0, (%0)
Değiş
bunu mu demek istiyorsunuz?
 

 

Nogitsun.com | Yazılım Çözümleri Üretir.

#3
sillyman sillyman WM Aracı Kullanıcı
  • Üyelik 12.04.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğretmen
  • Konum İzmir
  • Ad Soyad T** U**
  • Mesajlar 191
  • Beğeniler 40 / 38
  • Ticaret 1, (%100)
Nogitsun yok hayır "deg" divinin üstüne gelindiğinde "renk" divinin renginin değişmesini istiyorum.
Fakat birbirlerini kapsamadıkları için değiştiremedim nasıl yapabiliriz?
 

 

#4
Nogitsun Nogitsun Nogitsun.com Kullanıcı
  • Üyelik 18.11.2015
  • Yaş/Cinsiyet 29 / E
  • Meslek .NET Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Y**
  • Mesajlar 232
  • Beğeniler 32 / 75
  • Ticaret 0, (%0)
Sayfa içi çağarıyorsan (çalışmazsa başına jquery js dosyasını çek altına bu script kodlarını ekle);
<script>
$(document).ready(function(){
$(".deg").hover(function(){
$(.renk).css("background-color", "yellow");
});
});
});
</script>

Js içi dahil edeceksen script taglarını sil.

Not: Kodları aklımdan yazdım scop hataları ile karşılaşırsan söyle düzeltelim.
 

 

Nogitsun.com | Yazılım Çözümleri Üretir.
wmaraci
wmaraci

#5
sillyman sillyman WM Aracı Kullanıcı
  • Üyelik 12.04.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğretmen
  • Konum İzmir
  • Ad Soyad T** U**
  • Mesajlar 191
  • Beğeniler 40 / 38
  • Ticaret 1, (%100)
Nogitsun Yazdığın kod mantıklı çalışma ihtimali var deneyeceğim.
Css yapmamızın yöntemi yok mu acaba ?

.deg:hover + .renk ya da .deg:hover > .renk böyle kodlar gördüm internette bunlarla yapabilinir mi acaba ?
 

 

#6
Nogitsun Nogitsun Nogitsun.com Kullanıcı
  • Üyelik 18.11.2015
  • Yaş/Cinsiyet 29 / E
  • Meslek .NET Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Y**
  • Mesajlar 232
  • Beğeniler 32 / 75
  • Ticaret 0, (%0)
Olabilir olmaz diye bir şey yok geniş yelpazeli bir dil. Çeşitliliği fazla ama düşündüğümde bana kalsa direk js ile değiştirirdim.
 

 

Nogitsun.com | Yazılım Çözümleri Üretir.

#7
HapyMan HapyMan Full Stack Developer Kullanıcı
  • Üyelik 14.05.2016
  • Yaş/Cinsiyet 32 / E
  • Meslek What do you do exactly ?
  • Konum İstanbul Avrupa
  • Ad Soyad T** T**
  • Mesajlar 561
  • Beğeniler 171 / 208
  • Ticaret 0, (%0)
bu işinizi görecektir.



.changer {
width: 150px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: #c3c3c3;
font-family: 'Roboto',sans-serif;
border-radius: 10px;
position: relative;
float: left;
cursor: pointer; }

.change {
width: 200px;
height: 200px;
margin-left: 10px;
color: #fff;
background-color: #3bdfe3;
position: relative;
float: left; }

.changer:hover + .change {
background-color: darkred; }



aJgdqa
 

 

#8
ErcanDinsel ErcanDinsel E' Kullanıcı
  • Üyelik 28.01.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Grafiker. / ercandinsel.org
  • Konum Kocaeli
  • Ad Soyad E** D**
  • Mesajlar 670
  • Beğeniler 54 / 241
  • Ticaret 1, (%100)
Böyle birşey istiyorsunuz sanırım;
http://jsfiddle.net/YShs2/611/
 

 

#9
sillyman sillyman WM Aracı Kullanıcı
  • Üyelik 12.04.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğretmen
  • Konum İzmir
  • Ad Soyad T** U**
  • Mesajlar 191
  • Beğeniler 40 / 38
  • Ticaret 1, (%100)
ErcanDinsel ve HapyMan çok saolun aynen böyle birşey :D
Bende +'yı kullandım fakat çalışmadı bende ondan buraya konuyu açtım. Tarayıcıdan kaynaklı bir şeydi galiba benimki.

bir soru daha sorayım sizi yaklamışken: Bazı yerlerde +, > ya da ~ bu ifadeler kullanıyor hover özelliğinde bunları bana örnekleyebilir misiniz acaba?
 

 

#10
ErcanDinsel ErcanDinsel E' Kullanıcı
  • Üyelik 28.01.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Grafiker. / ercandinsel.org
  • Konum Kocaeli
  • Ad Soyad E** D**
  • Mesajlar 670
  • Beğeniler 54 / 241
  • Ticaret 1, (%100)
Css seçicileri çok fazla burda sıkıştırarak daha çok kafanı karıştırırız, tayfun erbilenin css seçicileri üzerine bir konusu var ona bakarsan yardımcı olur diye tahmin ediyorum.
http://www.erbilen.net/css-seciciler-1-10/
sillyman HapyMan

kişi bu mesajı beğendi.

T soft tema giydirme
Menübar Açılır Menü
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al