Using jQuery to define active or hover background images

Question

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with relevant content.

However, I'm facing a challenge:

I want to achieve the following behavior - when an item is clicked, its background image should change to color (using the '-cl.png' suffix). If I hover over another item, its background image should also change to color, while keeping the previously clicked item in color as well. Any item that is not hovered over should display a black and white version of the background image (with the '-bw.png' suffix), except for the active item which should remain in color.

I hope this explanation makes sense. Any suggestions on how I can implement this? Thanks, Brett

Below is my HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>

jquery css events

Answer 1

Answer №1

To start, the majority of the work can be done in CSS to style elements as needed:

.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

Then, in jQuery, you only need to focus on managing the 'active' class like so:

$('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

By using .addClass() for the clicked element and .removeClass() for the others, you can easily toggle the 'active' class. If you want to remove it from an already active element (toggle off), consider replacing .addClass() with .toggleClass() for that functionality.

Answer 2

To start, the majority of the work can be done in CSS to style elements as needed:

.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

Then, in jQuery, you only need to focus on managing the 'active' class like so:

$('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

By using .addClass() for the clicked element and .removeClass() for the others, you can easily toggle the 'active' class. If you want to remove it from an already active element (toggle off), consider replacing .addClass() with .toggleClass() for that functionality.

Answer 3

Answer №2

$('.graduate_tab li').mouseover(
  function() {
    $(this).css('background-image','hover-image-cl.jpg');
  }, function() {
    $(this).css('background-image','hover-image.jpg');
  });

$('.graduate_tab li').on('click', function() {
  $('.graduate_tab li').removeClass('active');
  $(this).addClass('active');
});

This code should work for your needs. If there are any modifications needed, feel free to let me know.

Answer 4

$('.graduate_tab li').mouseover(
  function() {
    $(this).css('background-image','hover-image-cl.jpg');
  }, function() {
    $(this).css('background-image','hover-image.jpg');
  });

$('.graduate_tab li').on('click', function() {
  $('.graduate_tab li').removeClass('active');
  $(this).addClass('active');
});

This code should work for your needs. If there are any modifications needed, feel free to let me know.

Answer 5

Answer №3

Instead of assigning classes to each li element in CSS, I utilized the click hover jQuery function:

.ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

Furthermore, I implemented this code:

 jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

I hope this solution proves beneficial for someone else as well.

Answer 6

Instead of assigning classes to each li element in CSS, I utilized the click hover jQuery function:

.ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

Furthermore, I implemented this code:

 jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

I hope this solution proves beneficial for someone else as well.

Answer 7

Answer №4

To create hover effects in CSS, you can use the :hover property.

For example:

:hover {background-color: red;}

This code snippet will change the background color to black when hovered over, but be cautious as it may not work in older browsers like IE6.

Answer 8

To create hover effects in CSS, you can use the :hover property.

For example:

:hover {background-color: red;}

This code snippet will change the background color to black when hovered over, but be cautious as it may not work in older browsers like IE6.

Answer 9

Answer №5

    $('.titleclz').mouseover(function( event ) {

    $(this).css('background-image','url(image-hover1.png)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseout(function( event ) {

    $(this).css('background-image','url(image-normal.png)');
    $(this).css('background-repeat','no-repeat');

});

Create JQuery hover effect for changing background images...

Answer 10

    $('.titleclz').mouseover(function( event ) {

    $(this).css('background-image','url(image-hover1.png)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseout(function( event ) {

    $(this).css('background-image','url(image-normal.png)');
    $(this).css('background-repeat','no-repeat');

});

Create JQuery hover effect for changing background images...

Using jQuery to define active or hover background images

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to implement client side validation for a related input field using JavaScript in a Rails application?

Firefox presents a compact box positioned between the images

What is React.js's approach to managing CSS files?

In JavaScript programming, the function is always executed after the bottom code

Dynamically enhance dropdownlist options in webforms using JavaScript

Chrome is the only browser that displays the correct number of columns, unlike IE and Firefox

Expanding the size of the number input in Twitter Bootstrap to accommodate changing content dimensions

Retrieve the response retrieved from AJAX/jQuery and insert it into the designated form input field

PHP does not provide any error when an update on a database row fails

Using jQuery UI to create sortable lists that are connected and have hidden overflow features

Modify a number with a check box using inline Ajax

Applying a Webkit Scroll Bar to a specific element on the webpage

Animation not functioning properly after Ajax call in event onload

When making a request for "/example.php/" the CSS does not seem to take effect, however, the content is displayed properly

Showing information from a table for editing purposes with the use of HTML input tags

WordPress CSS Styling Issue: HTML Element Display Problem

Organizing grid elements within the popper component

The Jquery map function is not returning selected options, always returning empty values. It seems to be avoiding the variable, although it functions properly on jsfiddle. There are

How to include <li> in a preexisting <ul> using JSON data in jQuery

jQuery Conditional String Manipulation