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

What is the best way to reset an angularJS form after it has been submitted

I am trying to figure out a way to clear form fields on a modal window after the user executes the save method. I have attempted using $setPristine in AngularJS, but it's not working as expected. Any suggestions on how to achieve this task? Here is t ...

javascripthtmlangularjs

Can you help me identify the reason behind a page displaying a temporary horizontal scrollbar?

While browsing the following page in Google Chrome: A horizontal scrollbar appears briefly during page load. It seems that something hidden below the fold is causing this issue, but I haven't been able to identify the exact cause. EDIT:- Watch a v ...

htmlgoogle-chromewebkitrender

Discovering the current page using ons-navigator in Onsen UI

I am currently attempting to determine the page I am on while using the popPage() function with Onsen UI's ons-navigator. I have tried the following methods, but they always return false regardless: this.navigator.nativeElement.popPage().then((page: a ...

htmlangulartypescriptnavigationonsen-ui

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

Images obscure dropdown menu

The issue I am experiencing with my blog is that the dropdown menu is appearing behind the image slider on the main page. You can see it here: Can anyone offer guidance on how to prevent this from happening so that the dropdown menu is not obscured? Just ...

javascriptcsswebblogger

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

What is the proper way to define a class attribute for an HTML element within a PHP file?

I am having trouble writing the class attribute in a PHP file for an HTML element. Here is my code: echo '<div><p class="'.($value->getIsRequire() == 1) ? 'required' : ''.'"> </p> <input type="tex ...

phphtmlcssmagento-1.9

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

Rotating through classes with JQuery click event

I'm attempting to create a toggle effect for list items where clicking on an item will change its color to green, then red, and then back to its original state. Some list items may already have either the green or red class applied. However, my curren ...

jquerycss

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

javascripthtmlflexbox

Exploring the contrast between window and document within jQuery

I'm curious about the distinction between document and window in jQuery. These two are commonly utilized, but I haven't quite grasped their differences. ...

javascriptjqueryhtmlcss

I am having trouble aligning the element perfectly in the center

I'm working on a radio input design featuring a circle in the middle, achieved via the pseudo element ::before However, I've noticed that when the input size is an odd number, the centering isn't quite perfect This issue seems more promine ...

htmlcsspseudo-element

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

javascriptjqueryioscsstwitter

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

htmlcsscss-selectors

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

Issue with Bootstrap alignment on the right side

Just finished creating my 'navbar' in bootstrap, but I'm having trouble aligning my unordered list to the right. It's staying in the middle no matter what I try. Can someone please help? Feeling really confused... HTML: <div class= ...

javascripthtmlcsstwitter-bootstrap

Using jQuery and Ajax to populate a dropdown menu with options

I'm currently working on an ajax call function that successfully fills a drop-down list with data from a specific URL. However, I am looking to modify the function so that it can receive variables in order to populate the drop-down list dynamically. ...

jqueryhtmlajax

Width and left values don't play well with absolute positioning

I am encountering an issue where a div with absolute positioning, which is a child of another absolute positioned element, is not behaving as expected. Despite setting width:100%; left:1px; right:1px on the child element, it extends beyond its parent. < ...

htmlcss

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss