Enhancing user experience with hover effects: A deep dive into jQuery

Blog / CSS / Elementor / JS / WordPress Elementor

In today’s blog post, we are going to explore a practical example of using jQuery to enhance user interactions on a webpage. Specifically, we will look at how to create a hover effect that dynamically displays images associated with different elements.

The Code

Here’s the script we will be examining:

				
					<script>
jQuery(document).ready(function($) {
    // Initially hide all image elements
    $('#FP-3dprint-img, #IG-3dprint-img, #MP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();

    // Handling hover for #PP-3dprint
    $('#PP-3dprint').hover(function() {
        $('#PP-3dprint-img').show();
        $('#IG-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();
    });

    // Handling hover for #IG-3dprint
    $('#IG-3dprint').hover(function() {
        $('#IG-3dprint-img').show();
        $('#PP-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();
    });

    // Handling hover for #MP-3dprint
    $('#MP-3dprint').hover(function() {
        $('#MP-3dprint-img').show();
        $('#IG-3dprint-img, #PP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();
    });

    // Handling hover for #FP-3dprint
    $('#FP-3dprint').hover(function() {
        $('#FP-3dprint-img').show();
        $('#IG-3dprint-img, #PP-3dprint-img, #MP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();
    });

    // Handling hover for #CP-3dprint
    $('#CP-3dprint').hover(function() {
        $('#CP-3dprint-img').show();
        $('#IG-3dprint-img, #PP-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #SCP-3dprint-img').hide();
    });

    // Handling hover for #SCP-3dprint
    $('#SCP-3dprint').hover(function() {
        $('#SCP-3dprint-img').show();
        $('#IG-3dprint-img, #PP-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img').hide();
    });

    // If no image is showing, show #PP-3dprint-img
    if (!$('#PP-3dprint-img').is(':visible') && !$('#IG-3dprint-img').is(':visible') && !$('#MP-3dprint-img').is(':visible') && !$('#FP-3dprint-img').is(':visible') && !$('#CP-3dprint-img').is(':visible') && !$('#SCP-3dprint-img').is(':visible')) {
        $('#PP-3dprint-img').show();
    }

});
</script>

Breaking Down the Script

1. Document Ready Function

The script starts with jQuery(document).ready(function($) { ... });. This ensures that the jQuery code runs only after the DOM is fully loaded. Using $ as a parameter allows us to use the shorthand $ for jQuery within this function.

2. Initial State

				
					$('#FP-3dprint-img, #IG-3dprint-img, #MP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();

This line hides all the image elements initially. This ensures that no images are displayed when the page first loads.

3. Hover Events

The script contains a series of hover event handlers:

				
					$('#PP-3dprint').hover(function() {
    $('#PP-3dprint-img').show();
    $('#IG-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();
});

Each of these event handlers is attached to a different element (#PP-3dprint, #IG-3dprint, etc.). When the user hovers over one of these elements, the corresponding image is shown ($('#PP-3dprint-img').show();), and all other images are hidden ($('#IG-3dprint-img, #MP-3dprint-img, #FP-3dprint-img, #CP-3dprint-img, #SCP-3dprint-img').hide();).

This creates a dynamic effect where only one image is visible at a time, corresponding to the hovered element.

4. Default Image Display

				
					if (!$('#PP-3dprint-img').is(':visible') && !$('#IG-3dprint-img').is(':visible') && !$('#MP-3dprint-img').is(':visible') && !$('#FP-3dprint-img').is(':visible') && !$('#CP-3dprint-img').is(':visible') && !$('#SCP-3dprint-img').is(':visible')) {
    $('#PP-3dprint-img').show();
}

Finally, the script ensures that if none of the images are visible (which might happen if the user moves the cursor away from all elements), a default image (#PP-3dprint-img) is displayed. This ensures there is always an image shown on the page.

Conclusion

This jQuery script enhances user interaction by dynamically displaying images based on hover events. Such a feature can be incredibly useful for creating engaging and interactive web pages, particularly for showcasing different items or features in a visually appealing way. By understanding and leveraging jQuery’s powerful capabilities, web developers can significantly improve the user experience on their websites.