<分区>
css - 导航链接悬停边框顶部有 2 种颜色
我制作的网站出现问题。当我将鼠标悬停在导航链接上时，我希望 border-top 具有不同的颜色。但是，当我尝试多次时，它不起作用。
悬停时的结果 |预期结果
<ul class="h_nav_list">
<li><a href="index.html" class="list active">HOME</a></li>
<li><a href="profile.html" class="list">PROFILE</a></li>
<li><a href="#" class="list" class="list">ACTIVITY</a></li>
ul { padding:15px 0; }
ul li { display:inline-block; font-size:16px; padding:10px; }
ul li a { text-decoration:none; color:#222; font-weight:bold; padding-top:50px; }
ul li a.active,
ul li a:hover { color:#014880; border-top:7px solid; width:50%; }
ul li a.list:hover { border-top:7px solid #1880C9; width:50%; }
最佳答案
您必须使用 after before 来实现此目的，请检查代码段。
ul { padding:15px 0; }
ul li { display:inline-block; font-size:16px; padding:10px;position:relative; }
ul li a { text-decoration:none; color:#222; font-weight:bold; padding-top:50px; }
ul li a.active,
ul li a:hover { color:#014880; border-top:7px solid; width:50%; }
ul li a.list:hover { border-top:7px solid #1880C9; width:50%; }
ul li a:hover:after{position:absolute; width:50%; background:#000; height:5px; content:''; left:0px; top:0px;}
ul li a:hover:before{position:absolute; width:50%; background:#ff0000; height:5px; content:''; right:0px; top:0px;}<ul class="h_nav_list">
<li><a href="index.html" class="list active">HOME</a></li>
<li><a href="profile.html" class="list">PROFILE</a></li>
<li><a href="#" class="list" class="list">ACTIVITY</a></li>关于css - 导航链接悬停边框顶部有 2 种颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56625313/