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

Question

我有一个缩略图。

将鼠标悬停在这张图片上时，一张全新的图片会按预期出现在附近。

挑战
一旦缩略图的悬停结束，新图像必须保留。只有当用户将鼠标从新图像上移开时，新图像才会消失。

纯 CSS 解决方案
在今天使用 CSS 试验了几个小时之后，我设计的最佳解决方案涉及 :hover 伪类、transition 和 opacity。对于 JS 中可能是一个简单的任务，这是一个复杂而复杂的解决方案。另外，该解决方案甚至不是那么好，可能只适用于较新的浏览器。因此，我已经不再寻找纯 CSS 解决方案(尽管我对您的想法持开放态度)。

JavaScript
我不太了解 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/

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

它不重置的原因是您正在使用 one() , 使用 one() 附加的处理程序对于每个事件类型的每个元素最多执行一次。

尝试使用 on()而是如下:

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

Updated Fiddle

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