Question

我的网站出现问题。当我将导航链接悬停时，我希望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

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

我已经使用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 3

编辑：（请参见下面的评论。）

您可以使用sum属性将return_cols <- grep("^Returns", names(df)) sales_cols <- grep("^Sales", names(df)) df[sales_cols][df[return_cols] == ""] <- 0 aggregate(cbind(Sales_Jan1980, Sales_Feb1980)~id + name, df, sum) # id name Sales_Jan1980 Sales_Feb1980 #1 2b LA 400 200 #2 5a NY 50 300添加到linear-gradient或<a>元素中。

<li>

border-image

Answer 4

您的HTML有一个错误，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 5

尝试在鼠标进入和鼠标离开时使用JavaScript，以向该元素添加样式

此代码用于您的html标签：

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

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

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

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

homeLink = document.getElementByID("home");

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

要添加所需的样式，请先创建该类或仅编辑该样式属性，如下所示：

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

并确保样式恢复为默认值，请执行以下操作：

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

导航链接悬停边框顶部有2种颜色

5 个答案: