Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it?

After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield any results when tested on Chrome while hovering over it.

.nav-main {
  width:100%;
  background-color: #222;
  height:70px;
  color:#fff;
  display:flex;
  justify-content: center;
}

.nav-main > ul {
  margin:0;
  float:left;
  list-style-type: none;
}

.nav-main > ul > li {
  float:left;
  padding-left: 10px;
}

.nav-item {
  display:inline-block;
  padding:15px 20px;
  height:40px;
  line-height:40px;
  color:#fff;
  text-decoration:none;   
}

.nav-item:hover {
  border-bottom-color: #00cc00;
}
<nav class="nav-main" id="navMain">
  <ul>
    <li>
      <a href="#" class="nav-item"> HOME</a>                              
    </li>
    <li>
      <a href="#" class="nav-item">ABOUT US </a>
    </li>
    <li>
      <a href="#" class="nav-item">PORTFOLIO </a>
    </li>
    <li>
      <a href="#" class="nav-item">SERVICES </a>
    </li>
    <li>
      <a href="#" class="nav-item">CONTACT US </a>
    </li>
  </ul>
</nav>

JS FIDDLE

http://jsfiddle.net/dgc4q/42/

htmlcss

Answer №1

When you specify the border-bottom-color, the browser assumes that you have also defined the other properties of the border (type and width). However, if you haven't done so, you need to make a change.

Instead of:

border-bottom-color: #00cc00;

You should use:

border-bottom: 1px solid #00cc00;

Example:

.nav-main {
  width:100%;
  background-color: #222;
  height:70px;
  color:#fff;
  display:flex;
  justify-content: center;
}

.nav-main > ul {
  margin:0;
  float:left;
  list-style-type: none;
}

.nav-main > ul > li {
  float:left;
  padding-left: 10px;
}

.nav-item {
  display:inline-block;
  padding:15px 20px;
  height:40px;
  line-height:40px;
  color:#fff;
  text-decoration:none;   
}

.nav-item:hover {
  border-bottom: 1px solid #00cc00;
}
<nav class="nav-main" id="navMain">
  <ul>
    <li>
      <a href="#" class="nav-item"> HOME</a>                              
    </li>
    <li>
      <a href="#" class="nav-item">ABOUT US </a>
    </li>
    <li>
      <a href="#" class="nav-item">PORTFOLIO </a>
    </li>
    <li>
      <a href="#" class="nav-item">SERVICES </a>
    </li>
    <li>
      <a href="#" class="nav-item">CONTACT US </a>
    </li>
  </ul>
</nav>

Answer №2

It is not possible to modify the underline color of a hyperlink using CSS.

.nav-item:hover {
 border-bottom: 1px solid #00cc00;
}

Alternatively, you can achieve this effect with the following code:

.nav-item:hover {
 border-style: solid;
 border-bottom-color: #00cc00;
 border-bottom-width: 1px;
}

Answer №3

Replace .nav-item with the following:

.nav-item {
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;
color:#fff;
text-decoration:none;   
border-bottom:1px solid transparent;
}

.nav-item:hover {
    border-bottom:1px solid #ff0000;
}

Answer №4

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: purple;
}

/* visited link */
a:visited {
    color: teal;
}

/* mouse over link */
a:hover {
    color: crimson;
}

/* selected link */
a:active {
    color: navy;
}
</style>
</head>
<body>

<p><b><a href="#" target="_blank">Click here for more information</a></b></p>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with JQuery Ajax rendering in browser (suspected)

I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...

javascriptjqueryhtmlajaxdom

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

phpjquerycssfile-uploadjasny-bootstrap

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss

"Combining multiple attributes to target elements while excluding specific classes

My dilemma lies in the following selector that identifies all necessary elements along with an extra element containing the "formValue" class which I aim to omit $("[data-OriginalValue][data-OriginalValue!=''][data-TaskItemID]") ...

javascriptjqueryhtml

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

htmlvue.js

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

javascripthtmlcssbutton

Angular: Disabling a button based on an empty datepicker selection

Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...

javascripthtmlangulartypescript

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Integrate Tailwind CSS into the bundled JavaScript file

Is there a way to integrate tailwind css into bundle js effectively? Take a look at this example involving vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. Upon executing npm run build , it generates 3 files: app.js ABOUTPAGE.js app.6cba1 ...

javascriptcssvue.jstailwind-css

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

Execute a JavaScript function when a form is submitted

Seeking to reacquaint myself with Javascript, encountering difficulties with this fundamental issue. https://jsfiddle.net/gfitzpatrick2/aw27toyv/3/ var name = document.getElementById("name"); function validate() { alert("Your name is " +name); } < ...

javascripthtmlonsubmit

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

"How to change the hover background of a select element in Chrome from its default setting to something else

Is there a way to remove the background color on hover and replace it with a different color? .drp-policydetails { border: 1px solid #dddddd; background-color: #ffffff; } <div className="form-group"> <select className="form-control drp-po ...

javascripthtmlreactjscss

Using PHP to dynamically pull and update webpage content directly from the database

Currently, I am utilizing PHP to upload information into a database and then using PHP again to display that data. In the code snippet provided below, PHP is used to exhibit all the content stored in the database. Each row within the database table will b ...

phphtmlmysql

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

javascripthtmlangulartypescript

AngularJS - Organize Item Hierarchy with Separate Containers for Each Group

My goal is to incorporate a $scope variable within an AngularJS controller that has the following structure: $scope.hierarchy = { name: 'bob', selected: true, children: [ { name: 'frank' }, { name: 'spike' ...

javascripthtmlangularjs

Next.js encountered an issue: React.Children.only function was expecting to receive only one React element child, but received more

I have created a component named Nav located in the components directory. Here is the code for it: import Link from 'next/link'; const Nav = () => { return( <div> <Link href="/"> <a> Home </a> ...

javascripthtmlreactjsfrontendnext.js

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Here is my method for obtaining the bar: let bar = $('#progressbar'); Styling and animating it is no problem, using either of these methods: bar.css(...) bar.animate(...) However, I am wondering how to adjust the CSS specifically for the prog ...

jquerycsshtmlanimationstyles

Tips for Creating a Responsive Homepage

I'm new to CSS and trying to create a responsive design for mobile IE. Currently, the page appears blank on IE but works fine on Google Chrome and other browsers :-) Here are the code snippets I have used: HTML: <div class="main"> <div ...

htmlcss