Enhance your navbar with interactive image effects on hover

Looking to create a CSS menu that changes images and background when hovered over. Below is the code for my menu:

HTML

<ul>
    <li class="active1"> <a href="profile.html" class="act">My Profile</a></li>
    <li><a href="sponsor.html" class="profile1">My Sponsor</a></li>
    <li><a href="bankdetails.html" class="profile2">My Payment Information </a></li>
    <li><a href="mydocuments.html" class="profile3">My Documents (KYC) </a></li>
</ul>

CSS

.tabs ul li a {
    color:#5d5c5c;
    list-style:none;
    text-decoration:none;
    font-size:15px;
    line-height:25px;
}
.tabs ul li {
    list-style:none;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border:1px solid #c3c3c3;
    float:left;
    background:#e2e3e4;
    padding:4px 16px;
}
.active1 {
    background:url('../images/profile.jpg') no-repeat left center #004b85 !important;
    color:#fff !important;
    padding-left:35px !important;
    height:40px;
    border:none!important;
}
.act {
    color:#fff!important;
}
.profile1 {
    background: url('../images/profile.png') no-repeat -2px 0;
    width: 23px;
    height: 15px;
    padding-left:25px;
}
.profile2 {
    background: url('../images/profile.png') no-repeat -4px -29px;
    width: 23px;
    height: 18px;
    padding-left:25px;
}
.profile3 {
    background: url('../images/profile.png') no-repeat -6px -61px;
    width: 20px;
    height: 20px;
    padding-left:25px;
}

Seeking assistance in making the CSS more dynamic using CSS nth-child items or jQuery. Any guidance is appreciated!

jquerycssmenunavigationnavbar

Answer №1

To enhance an element's style when it is hovered over, utilize the pseudo-class :hover. Simply introduce an additional selector in your code like this:

.profile1:hover {
  background: url('../images/profile_hover.png') no-repeat -2px 0;
  background-color: #FF33CC;
}

Apply this to each image by assigning them a common class that includes shared styles (multiple classes can be added to each element as follows: 

class="profile1 common-nav-class"
). Define the common styles in one class like so:

.common-nav-class {
  width: 20px;
  height:20px;
  padding-left:25px;
}
.common-nav-class:hover{
  background-color: #FF33CC;
}

Then, specify unique properties in individual class selectors.

For a more sophisticated look and feel, consider animating the background color with 

transition: 0.2s linear background-color
.

Answer №2

Instead of having separate active classes, you can simplify by using the :hover pseudoclass.

For example:

.card:hover {background-color: #FF0000;} /* standard css */
.card:hover {font-size: 16px;} /* this css will apply when you hover over a card */

Therefore, you can update your css to:

.button:hover {
  color: green;
  border: 1px solid blue;
}

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

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjqueryhtmlcss

Having trouble deleting element despite having the correct ID?

Whenever I click on the map, it adds an element to the map div using this line of code: $('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng ...

javascriptjqueryhtml

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

javascriptcssextjsextjs4

Retrieving the initial response text using jQuery's ajax function

Is there a way to retrieve the original text of an AJAX request? For example, if I specify contentType: 'application/json', can I receive a string in the success method instead of a parsed JSON result? (Unfortunately, I am unable to set the Conte ...

jqueryajax

Ensure that the final item in the flexbox is centered, rather than the initial one

Is there a way to align the last element in the center without affecting the first one? The code snippet below demonstrates how this can be achieved: .impress-profiles { .flex() //less mixin for flexbox flex-flow: row wrap; justify-content: c ...

cssflexbox

I am having trouble with Owl Carousel in my code. Can anyone help me figure out what is causing the issue

I'm having trouble getting my owl carousel to display when I try to run it. I've made sure to link the correct stylesheets and scripts, but nothing is showing up on the page. Even after trying to link the stylesheets from both a local source and ...

javascripthtmljquerycss

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

jquerycsshtmlbootstrap-4rich-text-editor

Error message encountered when submitting a form after receiving an AJAX response: VerifyCsrfToken Exception

I'm encountering an issue with my AJAX functionality that involves rendering a form with multiple input fields and a submit button. Here is the AJAX call: <script type="text/javascript"> $('#call_filter').click(function() { $.aja ...

javascriptphpjqueryajaxlaravel

Extracting repeated information from a form_for select box using jQuery looped through

How can I duplicate the output of a Rails loop and display it in a different section of the webpage? This is the ERB code I am currently using: <%= form_for @order do |f|%> <div class="col-xs-6"> <%= f.fields_for :units, @orde ...

javascriptjqueryruby-on-rails

Creating a website layout using DIV elements that adjusts the background and buttons based on the screen

I'm currently tackling a straightforward HTML page but facing some challenges with the divs. The goal is to have a fullscreen background with four horizontal buttons aligned next to each other at the bottom. These buttons are currently linked to the b ...

htmlcssbackgroundcss-position

Having issues with C# ASP.Net autocomplete not functioning properly when using Javascript/Json post

I have been working on a c# asp.net usercontrol that requires a functional autocomplete feature. However, I am encountering an ongoing issue where the script appears to be running – with the progress bar spinning – but it consistently returns an ' ...

javascriptc#jqueryasp.netjson

Steps to resolve the 'Unknown keyword' issue while packaging a CSS file using webpack

In the process of upgrading dependencies to the latest versions for my Electron app built in Angular, I have encountered some issues. ✅ Electron remains on v19 ✅ Tailwindcss is updated to v3.1.8 ⬆️ Angular is being upgraded from v11 to v14 ⬆️ ...

javascriptcsswebpacktailwind-cssmonaco-editor

I would greatly appreciate your assistance in grasping the CSS code provided

Although I wouldn't consider myself a CSS expert, I usually can figure out how to manipulate code to achieve my desired result. However, the CSS code snippet below has me puzzled and I haven't been able to find any resources to help me make sens ...

htmlcss

Bootstrap 4 - How to Properly Align Text within Lists

Recently, I started experimenting with Bootstrap 4 and encountered an issue with centering text in a list-group. In Bootstrap 3, the following CSS rule worked like a charm: .list-con { text-align:center; } However, in Bootstrap 4, the text-align prope ...

htmltwitter-bootstrapcssbootstrap-4

Using JQUERY to handle event bubbling in the DOM after an AJAX call

I have been attempting to dynamically append content to a specific div using .ajax() and then utilize the new content within a jQuery Dialog. I believe that my usage of .on() is correct, but it appears that the DOM is not being properly updated. Here is t ...

javascriptjqueryhtmljquery-uidom

Utilize Jquery to insert new text into a textbox and then organize the contents of the textbox using Jquery

Currently, I am utilizing the ASP.NET asp:checkboxlist control which consists of 36 listitems, displaying 36 checkboxes. The HTML representation resembles a table format. My goal is to dynamically add checked items in this div in a sorted manner. Additiona ...

jqueryasp.nethtmljquery-ui

Guidelines for setting up individual click events for each button using Jquery

I'm encountering an issue with the following jQuery code. While I am able to successfully find each button by its id, clicking the button does not load the specified URL. How can I adjust the jQuery so that clicking the button triggers the URL loading ...

jquery

The jQuery trigger function fails to function properly on Safari browser

So, I have an input type file that I've hidden with CSS display none. Instead, I'm using another button to trigger it. I tested this setup on multiple browsers and it's working perfectly fine, except for Safari. $("#file_button").click(fun ...

jquerysafari

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

javascriptjqueryhtmld3.jstext-rotation