将鼠标悬停在缩略图上以启动新图像;(Hover over thumbnail image to launch new image; new image persists after hovering

将鼠标悬停在缩略图上以启动新图像;(Hover over thumbnail image to launch new image; new image persists after hovering ends)

我有一个缩略图。

将鼠标移到此图像上后，会出现一个全新的图像。

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

仅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/

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

I have a thumbnail image.

Upon mousing over this image, an entirely new image appears nearby, as intended.

THE CHALLENGE The new image must remain once the hovering of the thumbnail is over. The new image should only disappear when the user mouses away from the new image.

CSS-only Solution After experimenting for hours with CSS today, the best solution I devised involved the :hover pseudo-class, transition, and opacity. It's convoluted and complicated solution for what may be a simple task in JS. PLUS, the solution isn't even that great and may only work in newer browsers. So I've moved away from searching for a CSS-only solution (although I'm open to your ideas on this).

JAVASCRIPT I don't know JS very well, but I've come up with some code (probably poorly structured) that's gotten me closer to the goal. The JS I have in place right now fires the new image on thumbnail mouseover, and hides the new image on mouseleave.

The problem is that the code doesn't reset (so the user would have to refresh the page for the hover effect to work again).

Here's what I have so far:

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. Thank you.

最满意答案

它没有重置您正在使用one（）的原因 ，使用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()

The reason why it isn't resetting that you're using one(), The handler attached using one() is executed at most once per element per event type.

Try using on() instead as follows:

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

Updated Fiddle

Side note: on() isn't available prior jQuery 1.71, hence i updated the version of jQuery in fiddle,( on() is the recomended method for attaching event handlers as of now) For older version of jQuery you can use bind()