Jquery 悬停时在列表项下方加边框

当我将鼠标悬停在上面时，我试图在列表项下面划线，如本例所示：

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

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

虽然我想这样说：

我的代码：

HTML:

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 + "%";
            });
        });
});

---

我希望有人能帮助我，提前谢谢。

这有一个纯CSS的答案。有一个鲜为人知的属性，名为

框大小

（添加浏览器前缀以提高跨浏览器兼容性）。您可以在Chris（CSS-TRICKS）的文章中查看更多内容，了解更多关于它的用途和重要性的信息

现在来回答问题

首先，为所有

li

标记添加一个公共类，这样可以减少您编写的CSS数量。然后，为公共类选择器添加一个值为border box的框大小调整属性。例如，如果您的公共类是

.list

，它看起来有点像这样：-

.list{框大小：边框框；}

然后当你把鼠标悬停在列表标签上

.list:hover{边框底部：3px纯黑色；//或任何您想要的颜色}

---

我认为应该这样做。这里有一个例子，我建议你不要使用百分比，因为如果你放大或缩小浏览器，它们会被扭曲

有没有指向演示站点的链接？@Karl AndréGagnon不幸的是，它在我的计算机中是一个简单的.html文件。那么你可以试着制作一个JSFIDLE，如果背景图像丢失，它不会影响任何东西。如果你能发布一个JSFIDLE，肯定会有所帮助。：）只需添加一个

边框底部：3倍纯色透明到您的
ul.menu li
，如下所示：
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; 
}

$(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 + "%";
            });
        });
});