Hover over the thumbnail to launch a new image; new image is saved after freezing

Question

I have a thumbnail.

When overwriting this image nearby, as intended, a completely new image appears.

CALL
A new image should remain after the thumbnail freeze is completed. The new image should disappear only when the user leaves the new image.

CSS only solution
After hours of working with CSS today, the best solution I developed included a pseudo-class :hover, transitionand opacity. This is a confusing and complicated solution for a simple task in JS. PLUS, the solution is not even so great and can only work in new browsers. Therefore, I refused to search for a CSS-only solution (although I am open to your ideas on this).

JAVASCRIPT
I don't know JS very well, but I got code (possibly poorly structured) that brought me closer to the goal. JS, which I am now in place, launches a new image on a miniature mouse pointer and hides a new image on mouseleave.

The problem is that the code does not matter reset (so the user will have to refresh the page so that the hover effect works again).

Here is what I still have:

HTML

<ul>
<li id="thumbnail">
    <a href="#">THUMBNAIL IMAGE</a>
        <ul>
            <li> 
                <a href="#">NEW IMAGE NEARBY</a>
            </li>
        </ul>
</li>
</ul>

CSS

ul > li > ul {display: none;}

ul > li#thumbnail > a {
     background-color: #f00;
     color: #fff;
     padding: 5px;
}

ul > li > ul > li {
     position: absolute;
     top: 50px;
     left: 175px;
     background-color: #0f0;
     color: #fff;
     padding: 15px; 
}

ul li ul.permahover {display: block;}

Javascript

$("#thumbnail").one("mouseover", function() {
$("#thumbnail ul").addClass('permahover');
});

$("#thumbnail ul").mouseleave(function(){
$(this).hide();
}); 

http://jsfiddle.net/nyc212/Ey2bK/2/

Any help would be greatly appreciated. Thanks.

Answer 1

The reason it is not reset is that you use one () , the handler attached with one()is executed no more than once per element for an event type.

Try using on () as follows:

$("#thumbnail").on("mouseover", function () {
  $("#thumbnail ul").addClass('permahover');
});
$("#thumbnail ul").mouseleave(function () {
  $("#thumbnail ul").removeClass('permahover');
});

Updated Fiddle

: on() jQuery 1.71, jQuery , (on() - ). jQuery bind()