Implementing nested CSS styles with jQuery - a step-by-step guide!

In my stylesheet.css file, I have the following code:

.vertical-navigation .navbar-default .navbar-nav > li > a:hover {
    background-image: url(../images/sticcky_nav_hover.png)
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navfirst:hover {
    background-position: 28px -2px;
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navsecond:hover {
    background-position: 24px -82px;
}

Is there a way to apply this hover effect on the <a href...> element when clicked, and have the hover effect remain even after the click event?

javascriptjqueryhtmlcss

Answer №1

If you want to achieve this effect for the first a tag, you can follow these steps. You can then apply the same process for the remaining tags.

To make things easier, update the CSS by assigning these properties to another class, like highlighted.

.vertical-navigation .navbar-default .navbar-nav > li > a:hover, 
.vertical-navigation .navbar-default .navbar-nav > li > a.highlighted {
    background-image: url(../images/sticcky_nav_hover.png);
}

Next, include the jQuery code below to toggle the class when the element is clicked.

$('.vertical-navigation .navbar-default .navbar-nav > li > a').click(function() {
    $(this).toggleClass('highlighted');    
});

I hope this solution is helpful to you.

Answer №2

Looks like the answer you've been searching for (works on touch screen devices as well)

      .vertical-navigation .navbar-default .navbar-nav > li > a:hover, 
      .vertical-navigation .navbar-default .navbar-nav > li > a:active {background-image: url(../images/sticcky_nav_hover.png)

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

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

pythonhtmlcssdjango

Preview of webpage in Sublime Text is not rendering jQuery properly

I am encountering an issue while trying to set up a page with skrollr for parallax effect. It functions perfectly on platforms like CodePen, but when I attempt to preview it after setting up my page on Sublime Text, nothing seems to work. Could there be s ...

jquerysublimetext

Struggling with determining the perfect transition speed for the sidemenu display

I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I di ...

javascripthtmlcss

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

javascriptangularjssmartystreets

Is there a way to recursively call a function to output JavaScript data?

In my recursive function, I am trying to return specific data after the function is completed. // Initializing my Database settings var coachdb = new AWS.DynamoDB({ ... }); // Keeping track of the current parameter's array index. var pos = 0; fun ...

javascriptrecursion

How can Vue be used to dynamically alter a string within an input field by incorporating the status of checked checkboxes?

Yesterday, I stumbled upon a concise Vue presentation on YouTube before answering a technical question on Stack Overflow. The question involved generating checkbox elements based on a string of text containing '1's and '0's, with the ch ...

javascriptvue.js

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

having difficulty choosing a particular identifier from a JSON string

I'm currently working on a project to create an admin page for managing client information. However, I've encountered an issue where I am unable to select the client's unique ID to display all of their information on a separate page. On the ...

javascriptjqueryjson

How do I navigate to a different page in Vue.js HTML based on user selection?

Here is my first attempt at writing HTML code: <div class="col-md-4" > <div class="form-group label-floating"> <label class="control-label">Select No</label> <select class="form-control" v-model="or" required=""> ...

javascriptjqueryhtmlvue.jsvue-component

Unable to align the row in the center

I'm having trouble centering a row with 4 columns. It seems off when I look at the picture below, specifically at the vertical border under the "most read" blue square. html file: <div class="block-section"> <div class="sm-section-wrapper" ...

htmlcsssasshaml

How to save data to a JSON file using the filesystem module in Node.js

After coming across this helpful guide at , I was intrigued by the creation of a point system in discord.js. The use of let points = JSON.parse(fs.readFileSync("./points.json", "utf8")); to read the file piqued my interest, leading me to explore how to bui ...

javascriptjsonnode.jsdiscord

Unique text: "Personalized button design without using SVG

I've been experimenting with creating a button using SVG, but unfortunately, it seems that SVG is not supported on Next.js & Material UI. Below you'll find the code snippet and screenshot I have been working with. Any help or guidance would be g ...

htmlcssmaterial-uifrontendnext.js

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

reduce opacity of specified div background

Objective / Purpose I am working with multiple div elements and I want to assign two distinct classes to each of them, each serving a different purpose within my application. One class should determine the level, influencing the color of the div. The oth ...

.netcsslessdotless

Sending back numerous information in the catch block

Recently, I was testing out the fetch API and encountered an issue with logging a fetch error. I tried catching the error and logging it within the catch block. Strangely, even when I added additional console.log statements in the catch block, they would ...

javascriptnode.js

having trouble retrieving 200 status code from Angular server response

Objective: I need to make certain changes to the record locally if the server responds with a 200 code. Problem: I am unable to retrieve the response code or access the 'message' attribute. This is the server response I receive from the HTTP ca ...

javascriptnode.jsangulartypescriptmongodb

Navigating through dynamic elements using Selenium

I'm having trouble extracting boxer information from the flashcore.com website using Selenium. The code I've written doesn't seem to be working properly. Can anyone point out where the error might be? The expectation is that Selenium should ...

javascriptpythonajaxseleniumparsing

Having an issue with loading checkboxes in a for loop using AJAX in jQuery Mobile, the .trigger() function is

I've been encountering a common problem online, and despite my best efforts, I can't seem to solve it. For those familiar with what I'm trying to do - I've successfully loaded static input content using .html(contentVariable), but thin ...

jqueryajaxjquery-mobilecheckbox

I'm currently learning about things that never change and struggling to grasp their meaning

I'm currently delving into the world of immutable.js record and trying to wrap my head around it. However, this particular piece of code is really throwing me for a loop. Here's my Question: I understand [import, export,const], but what ex ...

javascripttypescriptrecordimmutable.js

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss