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

What is the proper jQuery traversal method to display a single templated element?

Utilizing handlebars as the view engine for node.js, the subsequent html content is dynamically produced and repeated: http://jsfiddle.net/4Q5PE/ <div class="btnsContainer"> <div class="btn-group" data-toggle="buttons"> <label cla ...

javascriptjqueryhtmlcsstraversal

Show the text from the chosen option using jQuery with a button

Hey everyone, I have a question regarding a coding issue I'm facing. In this problem, I am unable to display the text from the selected option when I click the order button. The desired result is to show the selected option that I choose and display i ...

javascripthtmljquerybootstrap-5

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Dropdown list remains open despite a selection being made

My problem arises when I attempt to select an item from the list, as the dropdown menu does not populate automatically and the list remains open. Here is the HTML code for the dropdown list: <label id='choose' for='options'>Sele ...

javascriptjqueryhtmldrop-down-menuhtml-select

What is the best way to incorporate markers into my d3 line chart that includes two separate datasets?

In my JavaScript code, I'm creating a line chart for two datasets using the d3 library with Vue framework integration. Within the HTML code, there are buttons that trigger the updateData function to display the line charts for the respective datasets ...

javascripthtmlvue.jsd3.js

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

javascripthtmlgwt

Maintaining Proper Header Dimensions

Having some issues with aligning my fixed widget and floating navigation. The fixed widget is not respecting the height of the floating navigation and is appearing at the top when in its fixed position. I'm currently using "Q2W3 Fixed Widget" for the ...

csscss-float

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

javascriptandroidioscsscordova

I am having trouble getting my dropdown to line up with the drop button labeled "MORE"

Despite trying multiple approaches, I am still struggling to align the dropdown content with the dropbtn. My goal is to have the content consistently positioned below the more menu. HTML: ` <html> <meta name="viewport" content="width=device-widt ...

cssalignmentnavbardropdownpositioning

What is the best way to create space between floated elements and a cleared element?

I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...

css

The animation for the CSS background image simply refuses to cooperate

My goal is to create a CSS background animation using the Body tag. Below is the code I am currently using: body { animation-name:mymove; animation-duration:5s; animation-direction:alternate; animation-iteration-count:infinite; -webkit-animation-name:mymo ...

imagecssanimationbackground

Issues with Angular's http get functionality not functioning as expected

I'm experimenting with an API on apiary.io and attempting to retrieve data from it using Angular, but I'm encountering issues with the call. The setup seems straightforward, so I'm not quite sure what's causing the problem: HTML: < ...

javascripthtmljsonangularjs

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

javascriptphpjquerycssajax

Conceal the div element when located beneath an ordered list with a designated

I need help hiding the display of comment information if it is a child comment. Below is my attempt to hide the div with the id "info" if the "ol" element has a class of "children". If you have another method for hiding the div when the comment is a chil ...

javascriptjqueryhtmlcsswordpress

What is the best way to separate the date and time into individual components?

I have created a dynamic object that shows both the date and time. My goal is to figure out how I can separate the time portion from the date so that I can place it in its own HTML element and style it differently? JavaScript isn't my strong suit, e ...

javascripthtmldate

Tips on creating Twitter Bootstrap tooltips with multiple lines:

I have been using the function below to generate text for Bootstrap's tooltip plugin. Why is it that multiline tooltips only work with <br> and not \n? I would prefer to avoid having any HTML in my links' title attributes. Current Sol ...

javascripthtmlcsstwitter-bootstrap

Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1 Appreciate any help! CSS: ...

htmlcss

Delivering HTML Email

I want to send an HTML email with images using Google's SMTP servers. Here is the HTML code with inline CSS that I have generated: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type& ...

htmlscalaemailmime

The vertical tab is not appearing correctly within the modal across various browsers

While attempting to showcase a vertical tab inside a Bootstrap 4 Modal, I've encountered an issue where the same modal appears differently in Google Chrome versus Firefox browsers. Here is the code I am utilizing: <!-- Latest compiled and minif ...

cssbootstrap-4bootstrap-modal

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript