netbozum
tr.link

Css Hover Özelliği Sorunum

9 Mesajlar 1.946 Okunma
acebozum
tr.link

Junkii Junkii WM Aracı Kullanıcı
  • Üyelik 20.12.2012
  • Yaş/Cinsiyet 30 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad E** A**
  • Mesajlar 110
  • Beğeniler 22 / 20
  • Ticaret 1, (%100)
Son 3-4 gündür bir iş üzerine çalışıyorum. Hover özelliğiyle ilgili bir şeyi bir türlü yapamadım. Neredeyse 1 yıldır hiç html css ile uğraşmamıştım zaten :)

Neyse photoshopta yaptığım bir tasarımı html/css dökümünü yapıyorum. Takıldığım kısmın photoshop tasarımı şöyle.



Haberler listesi normalde griyken hover durumunda mavi olması lazım. Bu duruma kadar her şeyi yaptım. Yaptığım hali de şu:



Ancak hover'u sadece başlıkta ya da tarih kısmında kullanabiliyorum. Yani resimdeki alana geldiğim zaman hem tarih kısmı mavi hem başlık mavi olacak şekilde yapamadım.



Genel hatlarıyla div yapılarım vs şu şekilde



Hatta bu hover olayını tam olarak yapamamdan dolayı alttaki tüm haberleri oku kısmını bile düzgün yapamadım.

Yardımcı olabilir misiniz?
 

 

googleasistan
reklam

pg13 pg13 Xcode. Kullanıcı
  • Üyelik 01.10.2013
  • Yaş/Cinsiyet 41 / E
  • Meslek BilişimTeknolojileri Mühendisi
  • Konum İstanbul Anadolu
  • Ad Soyad O** Ö**
  • Mesajlar 321
  • Beğeniler 72 / 101
  • Ticaret 11, (%100)
site adresi pm gönderin yardımcı olayım.
 

 

MuratAltun MuratAltun www.webmarkt.net Kullanıcı
  • Üyelik 31.10.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek WEBMASTER/GRAFİKER
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 687
  • Beğeniler 277 / 189
  • Ticaret 0, (%0)
ayrıca imgur yasaklı sanırım resimler görüntülenmiyor.
 

 

GrafiMarkt,Webmarkt,HostingBurda

ykismetli ykismetli Tasarım Kullanıcı
  • Üyelik 22.08.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek Grafiker ve Web Master
  • Konum İstanbul Avrupa
  • Ad Soyad Y** K**
  • Mesajlar 342
  • Beğeniler 34 / 73
  • Ticaret 28, (%100)
Junkii resimleri farklı adresten yüklerseniz (örn. hızlı resim) daha iyi yardımcı olabiliriz. Zira şuan sanırım ben dahil birkaç arkadaş daha görememekte.
 

 

wmaraci
wmaraci

Junkii Junkii WM Aracı Kullanıcı
  • Üyelik 20.12.2012
  • Yaş/Cinsiyet 30 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad E** A**
  • Mesajlar 110
  • Beğeniler 22 / 20
  • Ticaret 1, (%100)

grafimood adlı üyeden alıntı

ayrıca imgur yasaklı sanırım resimler görüntülenmiyor.


ykismetli adlı üyeden alıntı

Junkii resimleri farklı adresten yüklerseniz (örn. hızlı resim) daha iyi yardımcı olabiliriz. Zira şuan sanırım ben dahil birkaç arkadaş daha görememekte.


imgur ben nasıl gözüküyor :) Neyse hizliresime yükledim şimdi, ilginiz için teşekkür ederim
 

 

MuratAltun MuratAltun www.webmarkt.net Kullanıcı
  • Üyelik 31.10.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek WEBMASTER/GRAFİKER
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 687
  • Beğeniler 277 / 189
  • Ticaret 0, (%0)
şuradaki anlatımla sanırım sorununuzu kökten çözebilirsiniz.
 

 

GrafiMarkt,Webmarkt,HostingBurda

pg13 pg13 Xcode. Kullanıcı
  • Üyelik 01.10.2013
  • Yaş/Cinsiyet 41 / E
  • Meslek BilişimTeknolojileri Mühendisi
  • Konum İstanbul Anadolu
  • Ad Soyad O** Ö**
  • Mesajlar 321
  • Beğeniler 72 / 101
  • Ticaret 11, (%100)
al arkadaşım yeni stil dosyanı hazırladım, buradan indirebilirsin:
http://www.filedropper.com/style_3
 

 

DenizOZTURK DenizOZTURK WM Aracı Kullanıcı
  • Üyelik 02.02.2014
  • Yaş/Cinsiyet 26 / E
  • Meslek -
  • Konum Diğer
  • Ad Soyad D** Ö**
  • Mesajlar 478
  • Beğeniler 189 / 158
  • Ticaret 4, (%100)

/* Haberler */

.news-box {
-webkit-box-shadow:0 0 20px rgba(0,0,0,.3);
-moz-box-shadow:0 0 20px rgba(0,0,0,.3);
box-shadow:0 0 20px rgba(0,0,0,.3);
background-color:#fff;
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
margin-bottom:50px
}

.news {
border-bottom:1px solid #f4f4f4;
padding:25px;
font-size:25px;
font-weight:100;
color:#666
}

.news-content ul li {
padding:2% 2% 4%;
border-bottom:1px solid #f4f4f4;
height:60px
}

.news-content ul li a:hover .news-date {
color:#eee;
background-color:#2da5da
}

.news-content ul li a:hover .news-head {
color:#2da5da;
background-color:#none
}

.news-content ul li a {
color:#666;
text-decoration:none
}

.news-date {
float:left;
padding:15px;
background-color:#e6e6e6;
text-align:center;
text-transform:uppercase;
height:50px;
width:50px;
margin-right:15px
}

.date-mounth {
font-weight:700;
margin-bottom:5px;
font-size:15px
}

.date-day {
font-weight:100;
font-size:30px
}

.date-mounth {
font-weight:700;
margin-bottom:5px;
font-size:15px
}

.news-head {
padding:.5% 0;
font-weight:700;
font-size:20px
}

.news-sub {
font-weight:100;
font-size:17px;
line-height:20px
}

.news-buton-genel {
padding:20px 0 20px 20px;
text-align:center
}

span.news-buton {
padding:13px;
color:#666
}

span.news-buton:hover {
color:#fff;
background-color:#2da5da
}

/* Haberler Son */


Test ettim çalışıyor.

Eğer renkler ile alakalı değişiklik yapacaksanız benim eklediğim kısım şu burayı düzenlemelisiniz.

.news-content ul li a:hover .news-date {
color:#eee;
background-color:#2da5da
}

.news-content ul li a:hover .news-head {
color:#2da5da;
background-color:#none
}
 

 

Junkii Junkii WM Aracı Kullanıcı
  • Üyelik 20.12.2012
  • Yaş/Cinsiyet 30 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad E** A**
  • Mesajlar 110
  • Beğeniler 22 / 20
  • Ticaret 1, (%100)
grafimood pg13 DenizÖZTÜRK

Çok teşekkür ederim hepinize sorunum çözüldü :)
MuratAltun

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 4 kişi okuyor. (0 kullanıcı ve 4 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al