Modify the text color in the navigation bar when hovering over it

Question

Modify the text color in the navigation bar when hovering over it

Can someone help me troubleshoot why the text in my navigation bar isn't changing color on hover? Here are my HTML, CSS, and JS codes:

HTML

<div class="nav">
    <ul class="pull-left">
        <li><a href="#">Ride</a></li>
        <li><a href="#">Drive</a></li>
    </ul>
    <ul class="pull-right">
        <li><a href="#">find a city</a></li>
        <li><a href="#">help</a></li>
        <li><a href="#">sign in</a></li>
    </ul>
</div>

CSS: I'm not sure whether to select 'a' or 'li'

.nav a {
    padding: 14px 10px;
    text-transform: uppercase;
    font-family: Avenir;
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

.nav li {
    display: inline;
}

.nav {
    padding-top: 30px;
    padding-right: 30px;
}

.add {
    color: maroon;    
}

JS

$(document).ready(function() {
    $('.nav').hover(function() {
        $('a').addClass('add')
    }, function() {
        $('a').removeClass('add')
    });
});

Any assistance would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

Avoiding the use of Javascript, you can achieve the desired effect simply with CSS:

To change the color on hover for navigation links, add a CSS style like this:

.nav a:hover {
    color: maroon;    
}

Check out this example on jsFiddle

Answer 2

Avoiding the use of Javascript, you can achieve the desired effect simply with CSS:

To change the color on hover for navigation links, add a CSS style like this:

.nav a:hover {
    color: maroon;    
}

Check out this example on jsFiddle

Answer 3

Answer №2

Provide the following method using a class.

The issue arises because you initially applied color to an element and then attempted to add color using a class, resulting in the inability to replace the color of the element.

Instead, apply color using a class to the anchor tag, as demonstrated here with the .black class.

$(document).ready(function() {
      $('.nav').hover(function() {
            $('a').addClass('add')
      }, function() {
            $('a').removeClass('add')
      });
});

.nav a {
      padding: 14px 10px;
      text-transform: uppercase;
      font-family: Avenir;
      font-size: 14px;
      font-weight: bold;
     
      text-decoration: none;
}

.black{
   color: black;
}

.nav li {
      display: inline;
}

.nav {
      padding-top: 30px;
      padding-right: 30px;
}

.add {
      color: maroon;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
      <ul class="pull-left">
            <li><a class="black" href="#">Ride</a></li>
            <li><a class="black" href="#">Drive</a></li>
     </ul>
     <ul class="pull-right">
           <li><a class="black" href="#">find a city</a></li>
           <li><a class="black" href="#">help</a></li>
           <li><a class="black" href="#">sign in</a></li>
     </ul>

Note: JQuery is not necessary to change color; it can be achieved using CSS only by utilizing the :hover pseudo-class.

Answer 4

Provide the following method using a class.

The issue arises because you initially applied color to an element and then attempted to add color using a class, resulting in the inability to replace the color of the element.

Instead, apply color using a class to the anchor tag, as demonstrated here with the .black class.

$(document).ready(function() {
      $('.nav').hover(function() {
            $('a').addClass('add')
      }, function() {
            $('a').removeClass('add')
      });
});

.nav a {
      padding: 14px 10px;
      text-transform: uppercase;
      font-family: Avenir;
      font-size: 14px;
      font-weight: bold;
     
      text-decoration: none;
}

.black{
   color: black;
}

.nav li {
      display: inline;
}

.nav {
      padding-top: 30px;
      padding-right: 30px;
}

.add {
      color: maroon;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
      <ul class="pull-left">
            <li><a class="black" href="#">Ride</a></li>
            <li><a class="black" href="#">Drive</a></li>
     </ul>
     <ul class="pull-right">
           <li><a class="black" href="#">find a city</a></li>
           <li><a class="black" href="#">help</a></li>
           <li><a class="black" href="#">sign in</a></li>
     </ul>

Note: JQuery is not necessary to change color; it can be achieved using CSS only by utilizing the :hover pseudo-class.

Answer 5

Answer №3

If you are determined to utilize Jquery for hovering over your menus, then your JS code ought to be as follows:

$('.nav li a').hover(function(){
    $('li a.add').removeClass('add');
    $(this).addClass('add');
}, function(){
        $(this).removeClass('add');
});

Your JSFiddle demonstration.

Note: The usage of !important in .add was necessary because the color: #000; property had already been assigned to your menus within .nav a.

Answer 6

If you are determined to utilize Jquery for hovering over your menus, then your JS code ought to be as follows:

$('.nav li a').hover(function(){
    $('li a.add').removeClass('add');
    $(this).addClass('add');
}, function(){
        $(this).removeClass('add');
});

Your JSFiddle demonstration.

Note: The usage of !important in .add was necessary because the color: #000; property had already been assigned to your menus within .nav a.

Answer 7

Answer №4

Simple Solution:

You can achieve this effect using CSS selectors without the need for JavaScript or JQuery.

.nav:hover {
    color: maroon;
}

Explanation:

The code above can be divided into two main parts:

The first part is the CSS selector, which targets all elements with a class of nav when they are being hovered over by the user.
The second part is the declaration block inside the curly braces. Here, you can define any styles for the element that will apply when it is being hovered over and revert back when not hovered.

CSS Selector Definitions:

To avoid any confusion, here are some definitions of different CSS selectors:

.nav:hover selects all elements with the class nav when they are hovered over.
.nav a:hover targets <a> tags within elements with the class nav when they are hovered over.
.a:hover selects all <a> tags when they are hovered over.
.nav:hover a selects all <a> tags within an element with the class nav when that element is being hovered over.

Additionally, you can use the :active pseudo-class for styling elements that are being clicked on or experiencing a mousedown event.

Answer 8

Simple Solution:

You can achieve this effect using CSS selectors without the need for JavaScript or JQuery.

.nav:hover {
    color: maroon;
}

Explanation:

The code above can be divided into two main parts:

The first part is the CSS selector, which targets all elements with a class of nav when they are being hovered over by the user.
The second part is the declaration block inside the curly braces. Here, you can define any styles for the element that will apply when it is being hovered over and revert back when not hovered.

CSS Selector Definitions:

To avoid any confusion, here are some definitions of different CSS selectors:

.nav:hover selects all elements with the class nav when they are hovered over.
.nav a:hover targets <a> tags within elements with the class nav when they are hovered over.
.a:hover selects all <a> tags when they are hovered over.
.nav:hover a selects all <a> tags within an element with the class nav when that element is being hovered over.

Additionally, you can use the :active pseudo-class for styling elements that are being clicked on or experiencing a mousedown event.

Answer 9

Answer №5

To change the color of links within the "add" class, you can utilize the !important declaration in your CSS.

.add {
     color: maroon !important;
}

An alternative way to achieve this effect is by using pure CSS as shown below.

.nav:hover a {
    color: maroon;
}

Answer 10

To change the color of links within the "add" class, you can utilize the !important declaration in your CSS.

.add {
     color: maroon !important;
}

An alternative way to achieve this effect is by using pure CSS as shown below.

.nav:hover a {
    color: maroon;
}

Modify the text color in the navigation bar when hovering over it

Answer №1

Answer №2

Answer №3

Answer №4

Simple Solution:

Explanation:

CSS Selector Definitions:

Answer №5

Similar questions

Converting a JSON array from an ExecuteScript: Step-by-step guide

What are your thoughts on this method? Verifying the existence of a variable or setting it to

Get rid of numerous div elements in a React.js application with the help of a Remove button

Revise the mobile navigation opening feature to activate by clicking on a link instead of an icon

Is the scroll navigation bar transparent on the right edge?

Creating dynamic buttons and textboxes on a JSP page

Instructions on creating an individual DropdownIndicator component with React-select for the purpose of reusability in different sections of the project

Error encountered while installing Material UI in Next.js with TypeScript and pure JavaScript configurations

What is the best way to retrieve data in Nodejs from a different execution context?

Why isn't my dropdown menu appearing correctly?

Having trouble uploading images using ReactJS on the web platform

Complete layout photography using bootstrap 4

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

Ensuring that the desired DOM elements have loaded before attempting to manipulate them in Vue.js

Browser-agnostic script proxy

Clicking on the button has no effect whatsoever

Display additional text when hovering over an object

Data Extracted from JSON Response to Save as Variable

Problem involving semi-transparent textures with two sides

What is the best way to adjust the size of a Div slideshow using