悬停并单击同一 div 上的功能答案

【问题标题】：Hover and click functionality on same div悬停并单击同一 div 上的功能
【发布时间】：2012-05-30 22:42:33
【问题描述】：

在同一个 div 上附加悬停和 onclik 功能的正确方法是什么？

这是我尝试过的，但没有成功（点击没有任何作用）：

$(function outlineHider(){
    $("#hotspot").hover(
        function() {
            $("#outlines").show(); //showing another div element
            function bindClick() {
                $("#hotspot").click(callAnotherFunction())};
            }, 
            function() {
                $("#outlines").hide();
            }
        );  
});

【问题讨论】：

可能重复 - stackoverflow.com/questions/2432003/…

标签： jquery

【解决方案1】：

如果我猜对了，这应该会对你有所帮助。

$(function outlineHider(){
    $("#hotspot").hover(
        function() {
            $("#outlines").show(); //showing another div element
    }),click(function(){
       $("#outlines").hide();
    });
});

Combine hover and click functions (jQuery)?

var hoverOrClick = function () { // 做一些普通的事情 } $('#target').click(hoverOrClick).hover(hoverOrClick);

第二种方式：使用绑定：

$('#target').bind('点击悬停', function () { // 为两者做点什么 });

【讨论】：

【解决方案2】：

试试这个

$(function() { 
    $("#hotspot")
        .hover(
            function() { $("#outlines").show(); }, //mousein
            function() { $("#outlines").hide(); }  //mouseout
        )

        .click(function() { 
            callAnotherFunction();
        });
});

【讨论】：

【解决方案3】：

试试这个：

$(function() { // document ready handler shortcut
    $("#hotspot").hover(
        function() { $("#outlines").show(); }, 
        function() { $("#outlines").hide(); }
    ).click(function() {
        callAnotherFunction()
    }); 
});

或者更短的版本，感谢@VisioN：

$(function() {
    $("#hotspot")
        .hover(function() { $("#outlines").toggle(); })
        .click(callAnotherFunction);    
});

【讨论】：

$("#hotspot").hover( function() { $("#outlines").toggle(); } ) 也应该可以工作，但更短。