Bu kılavuzun amacı, CSS kullanarak fareyle üzerine gelindiğinde bir görüntünün nasıl değiştirileceğini araştırmaktır. Öyleyse başlayalım!
Nedir: CSS'de gezinin?
:hover, bir fare tetiklediğinde HTML öğelerinin durumunu değiştirmek için kullanılan sözde sınıfın bir öğesidir. Bu CSS seçici, öncelikle öğeleri biçimlendirmek veya seçmek için kullanılır. Ancak, bağlantılara uygulanamaz.
Sözdizimi
:hover sözdizimi aşağıda verilmiştir:
eleman : üzerine gelmek {
CSS kodu. . .
}
Burada, ' eleman ”, üzerine gelme efektini uygulamak istediğiniz öğeyi ifade eder.
Şimdi, CSS kullanarak fareyle üzerine gelindiğinde görüntüyü değiştirmenin pratik örneğine geçeceğiz.
Örnek: Fareyle Üzerine Geldiğinde Görüntüyü CSS Kullanarak Nasıl Değiştirirsiniz?
Önce fareyle üzerine gelindiğinde resmi değiştirmek için HTML bölümüne iki resim ekleyin. İlk görüntü aktif durum içindir ve sonraki görüntü vurgulu durum içindir.
1. Adım: Resim Ekleyin
Belirtilen amaç için iki resim ekleyeceğiz, “ resim1 ' ve ' resim2 ” ve sınıf adını ikinci görüntüye “ olarak atayın. hover_img ”.
HTML
< gövde >< div sınıf = 'img' >
< resim kaynak = 'image1.png' >
< resim kaynak = 'image2.png' sınıf = 'hover_img' >
< / div >
< / gövde >
Adım 2: Stil Görüntüleri
Şimdi, ' kullanarak her iki görüntünün konumunu ayarlamak için CSS'ye gidin. durum ' Emlak. konumunu “olarak belirleyeceğiz. mutlak ” kesinlikle en yakın ebeveynine göre konumlandırmak için.
CSS
.img {durum : mutlak ;
}
Bu, aşağıdaki sonucu gösterecektir:
Bir sonraki adımda, ikinci resmi birincinin önüne koyacağız. Bunu yapmak için görüntünün konumunu “olarak ayarlayacağız. mutlak ” ve üst ve sol konumu “ olarak ayarlayın. 0 ”. Bu görüntüyü kullanmak ilk görüntünün önüne yerleştirilir, ancak fare üzerine gelindiğinde ikinci görüntüyü görüntülemek istiyoruz. Bu nedenle, ekran değerini “ olarak ayarlamak Yok ” istenen sonucu gösterecektir:
.hover_img {durum : mutlak ;
tepe : 0 ;
ayrıldı : 0 ;
Görüntüle : Yok ;
}
Verilen kodun çıktısı aşağıdaki gibidir:
İkinci görüntü, ilk görüntünün arkasına başarıyla gizlendi.
Şimdi, bir sonraki adıma geçin.
Adım 3: Hover'da Görüntüyü Değiştirin
Ardından, ' :vurgu ” öğesini seçin ve “ .img ” seçili öğeye fareyle üzerine gelmeyi uygulamak için. Ardından, ikinci görüntünün sınıf adını atayın “ .hover_img ”. Bundan sonra, parantez içinde display özelliğinin değerini “ olarak ayarlayın. Çizgide ”, öğeyi aynı satıra sığdırmaya zorlar:
.img : üzerine gelmek .hover_img {Görüntüle : Çizgide ;
}
Kullanıcı fareyle üzerine geldiğinde görüntünün değiştiğini gösteren sonuç:
Yukarıda verilen çıktı, CSS kullanarak fareyle üzerine gelindiğinde görüntüyü başarıyla değiştirdiğimizi gösterir.
Çözüm
Görüntü, “kullanılarak üzerine gelindiğinde değiştirilebilir. : fareyle üzerine gelin ” sözde sınıf öğesi. Bunu yapmak için, HTML dosyasına gerekli görüntüleri ekleyin, CSS kullanarak bunları aynı konuma ayarlayın ve :hover seçiciyi üzerlerine uygulayın. Sonuç olarak, üzerine gelindiğinde ilk görüntü değişecektir. Bu yazıda, pratik bir örnekle :hover kullanarak fareyle üzerine gelindiğinde bir görüntünün nasıl değiştirileceğini açıkladık.