Question

当我将鼠标悬停在列表项上时，我有一个列表，我已设置为弹出“个人资料”框。我已经完成了我想要实现的第一步，即弹出框，然后使用mouseenter和mouseleave将鼠标悬停在另一个LI上时隐藏框。下一步是保持显示框，因为它在此“配置文件”框中有链接和投票按钮。简而言之，我想将鼠标悬停在一个列表项上，显示一个仍然显示的框，直到另一个LI悬停在上面然后隐藏上一个框并显示一个正在悬停的文件。

任何输入都将不胜感激，谢谢!!

Answer 1

对两个处理程序使用jQuery .hover()（http://api.jquery.com/hover/），第一个用于悬停，第二个用于休假。

例如：

var popup = jQuery('#popup');

jQuery('li').hover(function(){
    popup.show();
}, function(){
    popup.hide();
});

显然，您必须使用正确的选择器更改jQuery('#popup')和jQuery('li')以捕获要显示/隐藏的弹出窗口元素以及列表中的项目：）

Answer 2

我做了一个非常准确的例子。

在这个例子中，我们使用悬停事件，：visible选择器和.hide（）函数。

HTML：

<ul>
    <li>Open This Box And Close Others<div>Hello</div></li>
    <li>No, Open This Box And Close Others<div>Goodbye</div></li>
    <li>How About Me<div>YOLO</div></li>
    <li>Hello...<div>WORLD!</div></li>
</ul>

CSS：

div {
    display: none;
}

JQuery的：

$(document).ready(function(e) {
    $('li').on('hover', function(e) {
        $('div:visible').hide();
        $(this).find('div').show();
    });
});

以下是JSFiddle上的示例：http://jsfiddle.net/ybot1122/8eK8F/ 请记住，在JQuery中实现行为有许多不同的方法。总是值得搜索和检查JQuery API http://api.jquery.com/以获取有用的函数。希望这有用！

JQuery - 在悬停时添加/删除框

2 个答案: