CSS İle Mouse Üzerine Gelince Görünüşün Değişmesi

« İdare İşler Müdürü Ne İş Yapar? Görevleri Nelerdir?

Herkese iyi günler dileriz.Bu yazımızda sizlere css ile mouse üzerine gelince görüntünün hangi kodlarla değiştiğini anlatacağız.

Bildiğiniz gibi web sitesi yapmak için bilmemiz gereken en temel dillerden birisi css’dir.Css’de yapılan bir sürü özellik vardır.Bunlardan birisi de sitedeki herhangi bir yazının veya resmin üzerine fare ile geldiğimizde onun görüntüsünü değiştirmektir. Peki bunu hangi kod ile ve nasıl yaparız şimdi onu anlatalım.

Öncelikle bu işlemi css de “:hover” kodu ile yapmaktayız.Şimdi bir örnekle açıklık getirelim.

Html Kodları;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css.css" />
</head>
<body>
<div id="kutu"></div>
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

Css Kodları;

#kutu{
height:50px;
width:50px;
background-color:red;
}
#kutu:hover{
height:50px;
width:50px;
background-color:blue;
}

#kutu{

height:50px;

width:50px;

background-color:red;

}

#kutu:hover{

height:50px;

width:50px;

background-color:blue;

}

Gördüğünüz gibi arkadaşlar 50*50 piksel boyutunda bir kutu yaptık.Öncelikle kutunun rengini kırmızı yaptık ardından :hover kodu ile kutunun üzerine gelince rengi maviye dönüştü.Dikkat ettiyseniz öncelikle #kutu id kodlarını normal olarak yaptık.Buraya kırmızı renk verdik.Ardından #kutu:hover kodu ile mouse üzerine geldiğimizde nasıl görüntü oluşacağını belirledik.Ekran görüntüsü ise aşağıdaki gibi olur.

Önce(Mouse üzerinde değilken);

Sonra(Mouse üzerindeyken);

Evet arkadaşlar sizler de bu şekilde :hover kodu ile fare üzerine geldiğinde şekil veya renk değiştirme yapabilirsiniz.Umarız faydalı olur.Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?