jquery - 悬停并单击同一 div 上的功能

Question

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

这是我尝试过的，但没有奏效（单击没有任何作用）：

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

Answer 1

试试这个：

$(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);    
}); 

Answer 2

试试这个

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

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

Answer 3

如果我做对了，这应该对你有帮助。

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

结合悬停和单击功能（jQuery）？

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

第二种方式：使用绑定：

$('#target').bind('click hover', function () { // 为两者做一些事情 });