Navigation Link Hover Border-top have 2 color

Question

I'm having problem in my website that I made. When I hover the navigation link I want the border-top have to different color. But when I tried it many times its not working.

result when hovered | expected result

<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%;  }

score 1 · Answer 1 · answered Jun 17 '19 at 05:55

You have to use after before to achieve this, please check snippet.

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>

score 1 · Answer 2 · answered Jun 17 '19 at 05:58

I have created a demo using after and before. Please check this:

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>

Killick · Answer 3 · 2019-06-18T04:53:46.900

1

Edit : (See comments below..)

You can add a linear-gradient to your <a> or <li> element with the border-image property.

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>

edited Jun 18 '19 at 04:53

answered Jun 17 '19 at 06:04

Killick

289
1
11

1

*Unfortunately linear-gradient doesn't work with border.* --> they do: https://jsfiddle.net/tcnefpgo/ – Temani Afif Jun 17 '19 at 08:27
@TemaniAfif pretty cool indeed, didn't know the property, thanks for your comment! Will modify my post. – Killick Jun 18 '19 at 04:39

nimsrules · Accepted Answer · 2019-06-17T06:07:59.020

Your HTML has a bug, the href of HOME wasn't closed with the double quote
The border-top does apply but because of the padding-top: 50px, it wasn't visible. I reduced it to 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>

Edit: Apologies, misunderstood your question in the first go. Updated the code snippet

score -2 · Answer 5 · answered Jun 17 '19 at 05:56

try JavaScript for on mouse enter and mouse leave to add style to that element

this code for your html tag :

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

make sure to add onload attribute to body tag , to load js function after page loaded like this :

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

inside myFunction get documents you want to work with like this :

homeLink = document.getElementByID("home");

now you can work with your document element that named homeLink , inside your script.

to add style you want , fisrt create that class or just edit that style attribute like this :

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

and to make sure style return to default do something like this :

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

Navigation Link Hover Border-top have 2 color

5 Answers5