Navigation Link Hover Border-top 有 2 种颜色

Question

我制作的网站出现问题。当我悬停导航 link 时，我希望 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%;  }

Answer 1

你的HTML有一个bug，HOME的href没有用双引号括起来
border-top 确实适用，但由于 padding-top: 50px，它不可见。我把它减少到 5px

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: 5px;
  position: relative;
}

ul li a::before,
ul li a::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 50%;
  height: 7px;
  display: none;
}

ul li a::before {
  background: #014880;
  left: 0;
}

ul li a::after {
  background: #1880c9;
  right: 0;
}

ul li a.active,
ul li a:hover {
  color: #014880;
}

ul li a.active::before,
ul li a.active::after,
ul li a:hover::after,
ul li a.list:hover::before,
ul li a.list:hover::after {
  display: block
}

<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>

编辑： 抱歉，一开始误解了你的问题。更新了代码片段

Answer 2

您必须使用 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>

Answer 3

尝试 JavaScript 在鼠标进入和鼠标离开时为该元素添加样式

您的 html 标签代码：

<li><a href="index.html class="list active" id="home" onmouseenter="homeEnter()" onmouseleave="homeLeave()">HOME</a></li>

确保在 body 标签中添加 onload 属性，以便在页面加载后加载 js 函数，如下所示：

<body onload="myFunction()"></body>

在 myFunction 中获取您想要使用的文档，如下所示：

homeLink = document.getElementByID("home");

现在您可以在脚本中使用名为 homeLink 的文档元素。

要添加您想要的样式，请先创建 class 或像这样编辑样式属性：

homeEnter() { homeLink.style.border-top = "1px solid black" }

并确保样式 return 默认执行如下操作：

homeLeave() { homeLink.style.border-top = '' }

Answer 4

我使用 after 和 before 创建了一个演示。请检查：

ul { padding:15px 0; }
.h_nav_list li {
  position: relative;
  display: inline-block;
  font-size:16px;
  padding:20px 10px;
  list-style: none;
}
.h_nav_list li a {
  color: #000;
  text-decoration: none;
}
.h_nav_list li::before,
.h_nav_list li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 7px;
  opacity: 0;
  content: '';
  transition: .3s all;
}
.h_nav_list li::before {
  background-color: #014880;
}
.h_nav_list li::after {
  left: 50%;
  background-color: #1880C9;
}
.h_nav_list li.active::before,
.h_nav_list li.active::after,
.h_nav_list li:hover::before,
.h_nav_list li:hover::after {
  opacity: 1;
}

<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">ACTIVITY</a></li>
    </ul>

Answer 5

编辑：（见下面的评论..）

您可以使用 border-image 属性.

将 linear-gradient 添加到 <a> 或 <li> 元素

ul li { display: inline-block; font-size: 20px; list-style: none; border-top: 4px solid darkblue; }
ul li:hover { border-image: linear-gradient(to right, darkblue 50%, aquamarine 0) 4; }
ul li a { text-decoration: none; color: black; }

<ul>
  <li><a href="">One</a></li>
  <li><a href="">Two</a></li>
<ul>

Navigation Link Hover Border-top 有 2 种颜色

Navigation Link Hover Border-top have 2 color

css

hover

navigationbar