How to save the last hovered state on an HTML element?

Question

I am working on a Wordpress shortcode for generating dynamically circles. At my current version I have a problem with saving my current and my last hover state.

Here is a fiddle

I have a problem displaying the text under the circles. The text should be displayed from the last hovered circle until I hover over a new one.

Is there maybe a better solution to my problem?

I think my problem is in the hover end.

   [...] ,function () {
        $contentBoxPrevious = $contentBoxCurrent;
        $contentBoxCurrent.removeClass('active-text');
        $(this).removeClass('hover active');
    }

Answer 1

Move this line

$contentBoxPrevious.removeClass('active-text'); 

from the handleOut function to the middle of handleIn function like this https://jsfiddle.net/eu0jcmh0/

What you were doing wrong was that you were removing the "active-text" class every time you moused out of the element instead of removed it when you moused on another element, hope I helped!

Answer 2

Your code looked way too complicated...
So I just rewrote it my way to achieve what I think you want as a result.

Here's the code:

$(document).ready(function() {

    // Set all texts invisible
    $(".text-content").css({
        "opacity": 0
    });

    // Declare previous and active indexes vars
    var previous_index;
    var active_index;

    $(".icon-circle").hover(function() {

        // On mouseenter, getting this index.
        active_index = $(this).data("index");

        // Show associated text.
        $(this).parent().find(".text-content").css({
            "opacity": 1
        });

        // Hide previous associated text.
        if (active_index != previous_index) {
            $("[data-index='" + previous_index + "']").parent().find(".text-content").css({
                "opacity": 0
            });
        }

    }, function() {
        // On mouseout, just keeping previous index...
        previous_index = active_index;
    });
});

Working Fiddle.