使用变量禁用悬停功能答案

【问题标题】：Disable hover function using variables使用变量禁用悬停功能
【发布时间】：2012-01-27 02:51:32
【问题描述】：

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

我正在尝试为 cmets 提供一个按钮，您将在其中按下第一个按钮，然后它将变为鼠标悬停颜色并显示“添加评论”按钮。然后当用户再次点击评论按钮时，它会回到“取消悬停”状态并隐藏“添加评论”按钮。

感谢您的帮助，希望不要用不好的措辞理解。

【问题讨论】：

您应该从 jsFiddle 复制您的代码并将其发布在此处以供后代使用，以防将来它对某人有所帮助并且 jsFiddle 从网络上消失。此外，您当前的代码遇到的实际困难是什么？这将有助于确定哪些方面没有按预期工作。

标签： javascript jquery html css hover

【解决方案1】：

我已将您的代码缩短了一点 :) 减少到 4 行：

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

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

我的建议：在可能的地方以及可以通过 CSS 完成的地方使用 CSS。

【讨论】：

【解决方案2】：

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

$("#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

【讨论】：

我能够按照你的建议让它工作哦，里面有 if(showing == 0)。感谢您的帮助