将鼠标悬停在缩略图上即可启动新图像；悬停结束后新图像仍然存在

我有一个缩略图。

将鼠标悬停在该图像上时，附近会出现一个全新的图像，正如预期的那样。

挑战
缩略图悬停结束后，新图像必须保留。仅当用户将鼠标移开新图像时，新图像才会消失。

仅 CSS 解决方案
今天对 CSS 进行了几个小时的实验后，我设计出的最佳解决方案包括:hover伪类，transition, and opacity。对于 JS 中的简单任务来说，这是一个复杂而复杂的解决方案。另外，该解决方案甚至不是那么好，可能只能在较新的浏览器中工作。因此，我不再寻找纯 CSS 解决方案（尽管我对您对此的想法持开放态度）。

脚本语言
我不太了解 JS，但我编写了一些代码（可能结构很差），这让我更接近目标。我现在使用的 JS 在缩略图鼠标悬停时触发新图像，并在鼠标离开时隐藏新图像。

问题是代码不会重置（因此用户必须刷新页面才能使悬停效果再次起作用）。

这是我到目前为止所拥有的：

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/ http://jsfiddle.net/nyc212/Ey2bK/2/

任何帮助将不胜感激。谢谢。

您正在使用的它没有重置的原因one() http://api.jquery.com/one/，附加的处理程序使用one()每个事件类型的每个元素最多执行一次。

尝试使用on() http://api.jquery.com/on/而是如下：

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

更新了小提琴 http://jsfiddle.net/Ey2bK/5/

边注： on()在 jQuery 1.71 之前不可用，因此我在 fiddle 中更新了 jQuery 的版本，( on()是目前推荐的附加事件处理程序的方法）对于旧版本的 jQuery，您可以使用bind()