在悬停时用下划线标注列表项

Question

我试图在我悬停时强调列表项，如下例所示：

但是在这个例子中，他们使用图像作为下划线。我正在尝试使用边框执行此操作。我的菜单是这样的：

当我将鼠标悬停在其中一个上时，形状变得非常有趣：

虽然我想要这样的事情：

我的代码：

HTML：

<ul class="menu">
<li class="anasayfa-m"><a href="">Anasayfa</a></li>
<li class="yazilar-m"><a href="">Yazılar</a></li>
<li class="kategoriler-m"><a href="">Kategoriler</a></li>
<li class="sayfalar-m"><a href="">Sayfalar</a></li>
<li class="gorunum-m"><a href="">Görünüm</a></li>
<li class="yorumlar-m"><a href="">Yorumlar</a></li>
<li class="kullanicilar-m"><a href="">Kullanıcılar</a></li>

CSS：

ul.menu { 
    width: 62%;
    height: 11%;
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    background-color: #e1e1e1;
    font-family: Verdana;
    font-size: 10px;
}
ul.menu li { 
    float: left;
    width: 13.14%;
    height: 100%;
    padding-right: 1%;
    border-right: 1px solid #ccc;
}
ul.menu li a {
position: relative;
top: 70%;
left: 27%;
}
ul.menu li:hover {
border-bottom: 3px solid #FFF;
outline: 1px solid #e1e1e1;
}
ul.menu li.kategoriler-m a {
left: 23%;
}
ul.menu li.sayfalar-m a {
left: 31%;
}
ul.menu li.yazilar-m a {
left: 35%;
}
ul.menu li.yazilar-m {
background: url(icons/myazılar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kategoriler-m {
background: url(icons/mkategori.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.sayfalar-m {
background: url(icons/msayfalar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.gorunum-m {
background: url(icons/mtheme.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.yorumlar-m {
background: url(icons/mcomments.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kullanicilar-m {
border-right: none;
background: url(icons/musers.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li a { 
    text-decoration: none; 
}

Jquery的：

$(document).ready(function () {
    var wh = $(window).height();
    $("ul.menu li").hover(function () {
            var height = $(this).height();
            var heightp = (100 * (height - 4)) / wh;
            $(this).addClass("onHover");
            $(this).css("height", function (heightp) {
                return heightp + "%";
            });
            $("ul.menu li").not(".onHover").css("height", function (heightp) {
                return heightp + "%";
            });
            $("ul.menu li").not(".onHover").css("border-bottom", "4px solid #e1e1e1");
        },
        function () {
            var height = $(this).height();
            var heightp = (100 * (height + 4)) / wh;
            $(this).removeClass("onHover");
            $(this).css("height", function (heightp) {
                return heightp + "%";
            });
        });
});

我希望有人可以提前帮助我。

Answer 1

这是一个纯CSS的答案。有一个鲜为人知的名为box-sizing的属性（添加浏览器前缀以获得更好的跨浏览器兼容性）。您可以通过Chris（CSS-TRICKS）在此post中查看更多内容，以了解有关它的更多信息，请访问＆amp;重要性。

现在问题。

首先，为所有li标记添加一个公共类，以便减少您编写的CSS数量。然后，为公共类选择器添加一个框大小调整属性，其值为border-box。例如，如果你的公共类是.list，它看起来会像这样： -

  

.list {box-sizing：border-box; }

然后当您将鼠标悬停在list标签上时，

  

.list：悬停{border-bottom：3px纯黑; //或者你想要的任何颜色}

我认为应该这样做。这是fiddle而且，我建议您不要使用百分比，因为如果您放大或缩小浏览器，它们会被扭曲。