CSS ile mause üzerine geldiğinde büyüyen Div

Bu dersimizde CSS ile mouse ile üzerine geldiğinde büyüyen ve rengi değişen bir script yapacağız..

Bu dersimizde CSS ile mouse ile üzerine geldiğinde büyüyen ve rengi değişen bir script yapacağız..

Ben bu scripti css kayma olarak kaydettim.

@charset "utf-8";

#style {
  background-color:#666666; 
  /* Burada htmlde tanımlı olan cssin ilk görüntü rengini veriyoruz    siz isterseniz resimde koyabilirsiniz */ 
  height: 200px; 
  /* burada yüksekliği belirliyoruz */
  width: 300px; 
  /* genişliği belirliyoruz */
  -webkit-transition-property: height; 
  /* burada "height" yani büyüklük değişsin diyoruz yani mause üzerine geldiğinde büyüyecek width deseydik genişleyecti */
  /* burada eğer hem yükseklik ve genişlik büyüsün istenirse "-webkit-transition-property: height;, width" kodunu yazmalıyız ve 17. satıdaki gibi olmasını istediğimiz genişliğide vermeliyiz */
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s; 
  /* kayma hızını belirliyoruz */
}

#style:hover {
  /* mause üzerine geldiğinde alacağı rengi seçtik */
    background-color:#0099FF;
    height: 500px; 
    /* yukardada 7. satırda belirttiğimiz height'ın olmasını isteğimiz değerini veriyoruz  */
    overflow:hidden;
}

Evet şu anda scriptimiz bitti ve sırada bunu HTML'de açması kaldı.

<html>
  <head>
    <link href="css Kayma.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="style"></div>
  </body>
</html>

Kolay gelsin.

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 6 yıl önce
kkeşke bir örnek resim koysaydınız
• 3 yıl önce
Bir kaç günüdür nasıl yapacağımı düşündüğüm bir çalışmaydı. Javascript ile yapmaya çalışırken bu şekilde olması bayağı kolayıma gitti doğrusu. Paylaşım için çok teşekkürler.
• 3 yıl önce
Teşekkür ederim, yardımcı olabildiğime sevindim :)

Yukarı Git