The hover effect is not altering the color

$(document).ready(function() {
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();
                if (scroll > 200) {
                    $(".nav-bg").css({
                        "background": "#fff",
                        "box-shadow": "0px 0px 4px #ddd"
                    });
                    $(".nav-link").addClass("link-color");
                    $(".nav-item a").hover(function() {
                        $(this).css("color", "#150945 !important");
                    })
                } else {
                    $(".nav-bg").css({
                        "background": "transparent",
                        "box-shadow": "none"
                    });
                }
            })
        })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

            <li class="nav-item">
            <a href="#contact" class="nav-link pi">THOUGHTS</a>
            </li>
            <li class="nav-item">
            <a href="#contact" class="nav-link pi">CONTACT</a>
            </li>

Expected Output: When hovering over the link, the color should change. It seems that adding properties other than color works fine, but when specific colors are added it does not function as expected.

javascriptjquerycss

Answer №1

It appears that the issue lies in the use of the !important keyword. Removing it should resolve the problem.

Avoid using !important in inline css declarations as it can cause conflicts and override other styles.

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 200) {
        $(".nav-bg").css({"background":"#fff","box-shadow":"0px 0px 4px #ddd"});
        $(".nav-link").addClass("link-color");
        $(".nav-item a").hover(function(){
          $(this).css("color", "red");
          })
        }
        else{
          $(".nav-bg").css({"background":"transparent","box-shadow":"none"});  
         }
 })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br/><br/>Scroll &darr; <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<ul>
  <li class="nav-item">
   <a href="#contact" class="nav-link pi">THOUGHTS</a>
 </li>
  <li class="nav-item">
    <a href="#contact" class="nav-link pi">CONTACT</a>
  </li>
</ul>
<br/>

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

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Sending variables to other parts of the application within stateless functional components

My main component is Productos and I also have a child component called EditarProductos. My goal is to pass the producto.id value from Productos to EditarProductos. Here is my Productos component code: import {Button, TableHead, TableRow, TableCell, Tabl ...

javascripthtmlreactjsreact-hooks

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...

htmlcssreactjsnavbar

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event

As a newcomer to Javascript, I am facing challenges navigating my way around. Currently, I am attempting to create a jQuery plugin that will facilitate resizing elements using the jQuery UI resizable plugin. My goal is to implement logic that dynamically ...

javascriptjqueryjquery-ui

How can we implement a function on every table using jQuery?

I have created a custom jQuery function for implementing pagination. However, I encountered an issue where when I load the function on a page with multiple tables, the pagination system gets applied to all tables. This means that the number of pages refle ...

jqueryhtmlhtml-tableeach

Executing a Python script asynchronously from a Node.js environment

I am currently managing a node.js program that handles approximately 50 different python script instances. My goal is to implement a throttling mechanism where only 4 processes can run in parallel at any given time. Initially, I attempted to create a simp ...

javascriptpythonasynchronous

Fixed top bar and navigation menu, with a body that can be scrolled

My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...

csslayoutheadermenu

Modify the URL and show the keyword utilized in a search module

Does anyone know how to update the URL in a search bar? I'm using Redux to display search results, but the URL remains the same. How can I make the URL show the keyword being searched, like this: http://localhost/seach?q=keyword ...

javascriptreactjsreact-routerreact-redux

sending information to PHP through AJAX dynamically

I implemented a registration form that utilizes function user_reg(user_name,user_email,user_pswd) { var serverpath=window.location; alert(serverpath); var dataString = 'name='+ user_name + '&email=' + user_email + '&psw ...

javascriptphpajax

What causes the AJAX JSON script to output an additional 0?

Within my WordPress website, there is an AJAX function that reaches out to a PHP function in order to retrieve a specific value from a transient record stored in the Database. Whenever I trigger this function with jQuery, I successfully receive the result ...

javascriptjqueryajaxjsonjsonp

What makes CVE-2021-33623 susceptible to ReDoS attacks?

CVE-2021-33623 points out that the code snippet below (addressed in this commit, along with test cases) is susceptible to ReDoS vulnerabilities: trimNewlines.end = string => string.replace(/[\r\n]+$/, ''); What makes it prone to ReD ...

javascriptregexdenial-of-service

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values ​​and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below? Below is the function I currently use to update ...

javascriptangulartypescriptionic-framework

Determine total number of covid-19 cases with JavaScript

I am looking to incorporate a real-time COVID-19 total cases tracker for Russia on my website. In order to achieve this, I am sending a request to using the following script: function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.o ...

javascriptarraysrequest

Displaying a single result in Angular from JSON without using the ng-repeat filter

Currently, I am working on developing an app to display news updates from a JSON API. The issue I am facing is that loading all the data from the JSON and filtering it using ng-repeat is causing slow performance, as there is a large amount of data. I woul ...

javascriptjsonangularjs

Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift. <ion-slide *ngFor="let loopValue of values"> <div *ngIf="viewValue == loopValue"> <b> {{loopValue}} </b> ...

cssangularionic-frameworkionic3

TinyMCE in collaboration with JustBoil.ME presents an innovative Image Uploader

I am currently facing an issue while using the jbimages plugin with tinymce. Everything seems to be loading fine, but when attempting to upload images, I encounter the following error: Invalid Key Characters Detected. Could someone please explain what th ...

phpjquerytinymcejustboil.me

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

javascriptjqueryhtml

I continuously encounter "undefined" when attempting to retrieve collections

Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...

javascripthtmlfirebase

React.js "universal" component that is able to be generated multiple instances of

I'm struggling to fully understand this problem. Here's the issue: imagine there is an app where I need to generate notifications, dialogs, or other similar elements from my code. One option is to have a "global" component that controls everyth ...

javascriptreactjs

How does the use of let versus const differ when iterating through a collection?

Utilizing Node.js (ES6) to iterate through each item in a collection like the one provided below: var statuses = [{ statusId: 1, description: 'New' }, { statusId: 2, description: 'Pending' }, { ...

javascriptnode.jsecmascript-6