将鼠标悬停在缩略图上即可启动新图片;悬停结束后，新图像仍然存在 [英] Hover over thumbnail image to launch new image; new image persists after hovering ends

问题描述

我有一个缩略图。

鼠标悬停在此图片上时，附近会显示一个全新的图片。

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解决方案

之后，新的图片应该会消失。我现在尝试使用CSS的小时，我设计的最好的解决方案涉及：hover 伪类， transition code> opacity 。它是一个复杂和复杂的解决方案，可能是一个简单的任务在JS。 PLUS，解决方案甚至不是那么好，可能只在新的浏览器中工作。所以我已经不再寻找一个纯CSS解决方案了（虽然我对你的想法是开放的）。

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

我不太了解JS，但是我想出了一些代码（可能结构不好），使我更接近目标。

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

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（）附加的处理程序每​​个元素最多执行一次每个事件类型。

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.

尝试使用 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（）

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()

这篇关于将鼠标悬停在缩略图上即可启动新图片;悬停结束后，新图像仍然存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！