unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links.

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

.nav li a:link,.nav li a:visited {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

Here is the HTML code:

<ul class = "nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Our Products</a></li>
        <li><a href="aboutus.html">Contact us</a></li>
</ul>

I am seeking advice from fellow developers on what mistake might have been made in the code. Any suggestions would be greatly appreciated!

htmlcss

Answer №1

If you want to make sure a style is applied, you can add !important like this:

.nav li a:hover,.nav li a:active {
    background-color:#7A991A !important;
}

Alternatively, you can rearrange the order of properties by placing the styles for :hover (and :active) after those for :link.

Answer №2

Update your CSS code by replacing .nav a:link with .nav li a

view demo here

  .nav li a, .nav li a:visited {
   /* Update the styles below for better design */
            display:block;
            width:9em;
            font-weight:bold;
            color:#FFFFFF;
            background-color:#98bf21;
            text-align:center;
            padding:4px;
            text-decoration:none;
            text-transform:uppercase;
        }

Answer №3

The code is now functioning perfectly in the Fiddle.

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav li a:link,.nav li a:visited {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

Answer №4

.top-navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.top-navigation li {
    float: left;
}
.top-navigation li a:visited{
    background-color: #98bf21;
}
.top-navigation li a:hover, .top-navigation li a:active {
    background-color: #7A991A;
}

.top-navigation li a{
    display: block;
    width: 9em;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

Answer №5

It seems like your a:hover style is being overridden by the a:link style or something similar.

In my opinion, because both a:hover and a:link are at the same level in the CSS file, the style defined lower in the file will take precedence.

You might find this helpful:

How to resolve CSS conflicts

Answer №6

Check out the demo.

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav-link {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav-link:hover,.nav-link:active {
    background-color:#7A991A;
}
  1. Avoid nesting too many tags and instead assign a class.
  2. Utilize :link :visited :hover :active only when altering default styles is necessary.
  3. In CSS, order is important. Place .nav-link first to establish standard styles before customizing with :hover and :active.
  4. Avoid using !important unnecessarily; prioritize rearranging the order of styles instead.

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

Exploring the possibilities with JavaScript options

I am currently working on a project that involves a dropdown list... to complete unfinished sentences. Unfortunately, I am facing an issue with a message stating Uncaught TypeError: Cannot read property 'options' of null Below is a portion of m ...

javascripthtmlforms

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

JavaScript code that uses jQuery does not function properly on an HTML form

Hello everyone, I am having trouble with some JavaScript code. Here is what I have: $(document).ready(function(){ $(".replyLink").click(function(){ $("#form-to-"+this.id).html(htmlForm()).toggle(500); return false; }); function htmlForm(){ var htm ...

javascriptjqueryhtml

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

Is it possible to search across multiple categories? For example, I have 4 dropdown menus: 1. City 2. Area 3. Month 4. Products/Services When a user visits my site, they will see a static page with 4 dropdown lists and a "search" button. After the user ...

phpjavascriptjqueryhtmlwordpress

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; border-radius: 5px; text-align: ce ...

css

How can I insert an empty option following a selected value in a dropdown menu using jQuery?

How to use jQuery to insert a blank option after an existing option? I attempted to add a blank option, but it ended up at the top of the dropdown. I actually need one existing option followed by one blank option. For example: <option></option& ...

javascriptjqueryhtmldropdown

"Customize your map pins on Google Maps by updating the marker location through a

I am trying to update the position of a map marker based on a dropdown selection. Upon changing the dropdown option, I retrieve the latitude and longitude values and want to set these coordinates for my current marker. Here is the code snippet: $("#locati ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

javascriptjqueryhtmlcssajax

JQuery ID Media Queries: Enhancing responsive design with targeted

Is it possible to integrate a media query into the selection of an ID using JQuery? For example: $('#idname') $('@media (max-width: 767px) { #idname }') In essence, can you target the #idname with that specified media query in JQuery ...

javascriptjquerycss

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

cssbootstrap-4

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

htmlcsscss-animations

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

javascriptjquerycsshtml

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: Here is the HTML code that I have implemented so far: <table class="table table-hover t ...

javascripthtmlhtml-table

Having trouble with tabs in jQuery?

I'm having trouble setting up tabs in a reservation form with 3 tabs that include text boxes for user input. I can't seem to get it working properly and I'm not sure where I've gone wrong. Could it be due to the placement of the content ...

javascriptjqueryhtmlcssjquery-ui-tabs

Troubleshooting: Difficulty with svg mask function when implementing an svg image in a react.js environment

I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/ <img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB ...

jquerycsssvgreactjsmask

How can I make a dropdown menu appear when I select a checkbox?

Is it possible to have a dropdown menu with changing options appear when I click on a checkbox using HTML and JavaScript? I have experimented with some code snippets in JavaScript as a beginner, but I am unsure if they are needed here. Is there an altern ...

javascriptphphtml