Question

我是jquery的新手，请原谅我的无知。我正在尝试创建一个删除按钮，当用户将鼠标悬停在删除按钮上时，会出现一个小确认，供用户取消（这将隐藏确认）或继续（将执行某些代码）。

当用户将鼠标悬停在删除链接上时，我能够显示确认信息，但当用户将鼠标从链接上移开时（当它们将鼠标悬停在确认消息上时）它会消失

这是我到目前为止的jsfiddle。

Answer 1

将html包装在容器中，并将悬停功能附加到容器中。

HTML

<div id="container">
<a href="#" class="deleteLink">Delete</a>
                <div class="hidden links">
                        Are you sure?<br />
                        <a href="#">Yes</a> |
                        <a href="#">No</a>
                </div>
</div>

JS：

$(document).ready(function(){
                $("#container").hover(
                    function(){
                        $(".links").removeClass("hidden").addClass("shown");
                    },
                    function(){
                        $(".links").removeClass("shown").addClass("hidden");
                    });
            });

Answer 2

看看这个：

http://jsfiddle.net/ahallicks/KgtF2/4/

边距是为了确保重叠，只要确保.links类与deleteLink类相同： - ）

Answer 3

将链接和相应的div包装在另一个div容器中，然后将悬停事件处理分配给父容器。

类似的东西：

<div id="deleteContainer">
    <a href="#" class="deleteLink">Delete</a>
    <div class="hidden links">
            Are you sure?<br />
            <a href="#">Yes</a> | 
            <a href="#">No</a>
    </div>
</div>

和JS：

$(document).ready(function() {
    $("#deleteContainer").hover(

    function() {
        $(".links").removeClass("hidden").addClass("shown");
    }, function() {
        $(".links").removeClass("shown").addClass("hidden");
    });
});

工作示例：http://jsfiddle.net/KgtF2/1/

基本的jQuery下拉列表

3 个答案: