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

Posted 2023-03-06

【中文标题】将鼠标悬停在缩略图上以启动新图像；悬停结束后新图像仍然存在

【英文标题】：Hover over thumbnail image to launch new image; new image persists after hovering ends

【发布时间】：2014-09-10 06:41:12

【问题描述】：

我有一张缩略图。

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

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

纯 CSS 解决方案 今天用 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？

【参考方案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()