Question

我有缩略图。

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

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

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

非常感谢任何帮助。谢谢。

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之前不可用，因此我在小提琴中更新了jQuery的版本，（on()是推荐的方法到目前为止附加事件处理程序）对于旧版本的jQuery，您可以使用bind()

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

1 个答案: