:hover CSS’te bir pseudo-class (yarı sınıf) olup, fare imlecinin (mouse pointer) bir HTML elemanının üzerine gelmesi durumunda uygulanacak stilleri tanımlar.
Kullanıcı ile etkileşim eklemek, görsel geri bildirim sağlamak ve UX’i geliştirmek için kullanılır.
Aşağıdaki örnekte fare imleci “Basit :hover Kullanımı” yazısının üzerine gelince linkin rengi değişiyor.
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #007bff;
text-decoration: underline;
}Önizleme
Basit :hover Kullanımıbutton {
background-color: #ff5722;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #1362eb;
}transition CSS özelliği kullanılarak renk geçiş süresi uzatılabilir, böylelikle daha yumuşak bir geçiş görünümü verilebilir.
CSS kullanarak zoom efekti vermek için detaylı anlatım için: https://juniortoexpert.com/tr/css-ile-gorsel-yakinlastirma-efekti/
<style>
.card {
padding: 20px;
border: 1px solid #ccc;
display: inline-block;
transition: background-color 0.3s ease;
}
.card-text {
color: #333;
transition: color 0.3s ease;
}
.card:hover .card-text {
color: #e91e63;
}
</style>
<div class="card">
<h3>Kart Başlığı</h3>
<p class="card-text">Bu yazının rengi hover ile değişecek.</p>
</div>Bu yazının rengi hover ile değişecek.
.card:hover .card-text seçici yapısıyla, kartın hover durumunda yalnızca içindeki .card-text öğesini etkileniyor. Bu yöntem arka plan, boyut, opaklık vb. tüm stillerde kullanılabilir.
<style>
.hover-test-menu {
list-style: none;
padding: 0;
margin: 0;
}
.hover-test-menu > li {
position: relative;
background: #3498db;
color: white;
padding: 10px;
cursor: pointer;
width: 150px;
}
/* Alt menü başlangıçta görünmez */
.hover-test-submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
list-style: none;
padding: 0;
margin: 0;
background: #2980b9;
width: 150px;
}
.hover-test-submenu li {
padding: 10px;
color: white;
}
/* Hover ile alt menüyü göster */
.hover-test-menu > li:hover .hover-test-submenu {
display: block;
}
</style>
<ul class="hover-test-menu">
<li>
Ana Menü
<ul class="hover-test-submenu">
<li>Alt Menü 1</li>
<li>Alt Menü 2</li>
<li>Alt Menü 3</li>
</ul>
</li>
</ul>Mobil cihazlarda :hover çalışmaz.