Css’de Hover Önceliği

Bazen menü yapımında şöyle bir sorunla karşılaşıyoruz.. Örneğin menüye hover ve aktif işlemleri uyguluyoruz.. Bir menü aktifken üzerine gelince hover işlemi gerçekleşiyor.. Halbuki aktif için bunun olmaması gerekir.. Peki böyle bir durumda ne yapmamız gerekecek? Öncelikle olası menü yapımız şöyle olsun;

<ul class="menu">
    <li><a href="#">Menü 1</a></li>
    <li class="aktif"><a href="#">Menü 2</a></li>
    <li><a href="#">Menü 3</a></li>
    <li><a href="#">Menü 4</a></li>
</ul>

Şimdi bu menü yapısına uygun css kodlarımız ise şöyle;

ul, li {
    padding: 0; margin: 0; list-style: none; font-family: Arial; font-size: 14px
}
a { text-decoration: none }

/* menü */
ul.menu {
    overflow: hidden
}
ul.menu li {
    float: left
}
ul.menu li a {
    display: block;
    padding: 8px 15px;
    color: #111
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}
ul.menu li a:hover {
    background: #111;
    color: #fff
}

Ancak bu şekilde, aktif olan menü üzerine gelindiğinde de yine aynı şekilde hover işlemi uygulanır.. Bunun sebebi, aktif bölümünü yazdığımız css kodlarının, hover işleminden önce yazılmış olmasıdır.. Yani aktif ve hover şöyle yer değiştirirse;

ul.menu li a:hover {
    background: #111;
    color: #fff
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}

Sorunumuz çözülür 🙂 İşte sizin için canlı bir demo;

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir