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

Hover over thumbnail image to launch new image; new image persists after hovering ends

本文关键字：图像 新图像 悬停 结束 存在 鼠标 启动 略图      更新时间：2023-09-26

我有一个缩略图。

将鼠标悬停在此图像上，一个全新的图像将在附近出现。


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

<<p> CSS-only解决方案/strong>
在今天用CSS做了几个小时的实验之后，我设计的最佳解决方案包括:hover伪类、transition和opacity。对于JS中的一个简单任务来说，这是一个令人费解和复杂的解决方案。另外，这个解决方案甚至不是很好，可能只适用于较新的浏览器。所以我已经不再寻找一个只使用css的解决方案了(尽管我对你的想法持开放态度)。 JAVASCRIPT


我不太了解JS，但我已经想出了一些代码(可能结构不佳)，使我更接近目标。我现在已经准备好的JS在缩略图鼠标上方触发新图像，并在mouseleave上隐藏新图像。

问题是代码没有重置(所以用户必须刷新页面才能使悬停效果再次工作)。


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/

任何帮助都将非常感激。谢谢你。

它没有重置的原因是你正在使用一个()，使用one()附加的处理程序每个元素每个事件类型最多执行一次。

试着用on()代替:

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

更新小提琴

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

相关文章：