Css İle Mouse Üzerine Gelince Değişen Resim

Bu yazımda butonların çalışma mantığını java kodlarıyla uğraşmadan kolayca mause over menü mantığı nasıl çalışıyor biraz inceleyelim. Kafanızı da fazla karıştırmayalım

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buton yapıyoruz</title> // bu sayfa başlığımız buna takılmayalım fazla )

<style type="text/css"> // burada css kodlarımızı açıyoruz
.degisen {
background-image: url(bt1.jpg);
height: 60px;
width: 150px;
}
.degisen:hover {
background-image: url(bt2.jpg);
height: 60px;
width: 150px;
}
</style>
</head>

<body>
<div class="degisen"></div>
</body>

evet yukarıdaki kodları çalıştırdığımızda karşımıza çıkan şeyin böyle birşey olması lazım:

şimdi neler yaptık aslında çok basit div tagına bir class atadık ve classımızın ismine de degisen yazdık ki bu da css kodumuzda kullandık. Sonra üzerine gelince değişen butonumuza da .degisen:hover dedik bu önemli çünkü butonumuzu bu şey değiştiriyor. resimleri background dan çekiyor ki burada resmi değiştiren farklı kombinasyonlarla daha farklı şeyler de yapabilirsiniz diğer bi yazımda fırsat olursa açılır menüye de bir giriş yaparız. sağlıcakla kalın