Elementor Pro文本悬停切换背景图效果修复求助

Key Issues in Current Code #

• No mouse leave event handler to revert to the main image
• Typo in selector: $('all-text') lacks a dot (should be $('.all-text'))
• Conflicting logic for showing/hiding text elements

Corrected jQuery Code #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery;
$(document).ready(function(){
    // Cache elements for better performance
    const $mainImg = $('.img-1');
    const $allImgs = $('.all-img');
    const $allTexts = $('.all-text');

    $('[data-showme]').hover(
        // Mouse enter: Switch to target image, keep text visible
        function(event){
            event.preventDefault();
            const targetClass = $(this).attr('data-showme');
            
            $allImgs.hide();
            $('.' + targetClass).show();
            $allTexts.show();
        },
        // Mouse leave: Revert to main image, keep text visible
        function(){
            $allImgs.hide();
            $mainImg.show();
            $allTexts.show();
        }
    );
});
</script>

Corrected CSS Code #

/* Default state: Hide all images except main */
.all-img {
   display: none;
}
.img-1 {
    display: block;
}

/* Ensure text elements are visible by default */
.all-text {
    display: block;
}

Explanation of Changes #

• Added a mouse leave handler to immediately revert to the main image when the cursor moves away
• Fixed the selector typo to properly target text elements
• Simplified logic to guarantee text elements stay visible throughout all interactions
• Cached frequently used elements to improve performance

内容的提问来源于stack exchange，提问作者Samir Malik