Question

我正在尝试按一下注释按钮，您将按下第一个按钮，然后它将更改为鼠标悬停颜色并显示“添加注释”按钮。然后，当用户再次单击评论按钮时，它将返回“取消悬停”状态并隐藏“添加评论”按钮。

感谢您的帮助，希望您的理解并不是很糟糕。

Answer 1

我已经缩短了你的代码:)下至4行：

$("#commentsempty").click(function() {
    $("#addcomment").toggle(500);
    $(this).toggleClass('over');
});

http://jsfiddle.net/2CkKW/10/

我的建议：尽可能使用CSS，并使用CSS完成。

Answer 2

只需检查if(showing == 0)第一个处理程序中的hover条件。但是，您可以检查添加注释按钮的可见性，而不是使用全局变量。试试这个

$("#commentsempty").hover(
    function(){
        if(!$("#addcomment").is(':visible')){
          $(this).css("background-position", "-148px");
          $("#commentsstatus").css("color", "#35a4de");
        }
    },
    function(){
    $(this).css("background-position", "-185px");
    $("#commentsstatus").css("color", "#484848");
})

$("#commentsempty").click(function(){
    if(!$("#addcomment").is(':visible')){
        $("#addcomment").fadeIn(500);
        $(this).css("background-position", "-148px");
        $("#commentsstatus").css("color", "#35a4de");
    }else{
        $("#addcomment").fadeOut(500);
        $(this).css("background-position", "-185px");
        $("#commentsstatus").css("color", "#484848");
    }
});

<强> Demo

使用变量禁用悬停功能

2 个答案: