Question

这是我的HTML元素之一。

<textarea type="text" data-class-changer="question" class="questioninputcss js-questioninput" data-integer-question="878"></textarea>

当我将鼠标悬停在某个元素上时，我希望该元素为toggleclass

我也尝试过addclass和removeclass，但我不确定它们是否会被动画化 - 我需要它。无论如何，我的脚本都没有用。

这是我的鼠标悬停脚本，它可以工作，并且与第一个无法工作的悬停脚本几乎相同。

    $(document).on("mouseover", ".questioninputcss",function() {
        $(this).toggleClass("questioninputcssHidden", 700);
    });

这些是我尝试过的许多悬停脚本：

    $(document).on("hover", ".questioninputcss",function() {
        $(this).toggleClass("questioninputcssHidden", 700);
    });


    $(document).hover(
        function(){ $(this).addClass('questioninputcssHidden') },
        function(){ $(this).removeClass('questioninputcssHidden') }
    );


    $(".js-questioninput").hover(
        function(){ $(this).addClass('questioninputcssHidden') },
        function(){ $(this).removeClass('questioninputcssHidden') }
    );



    $(".js-questioninput").hover(function(){
        $(this).toggleClass("questioninputcssHidden", 700);
    });



    $(".questioninputcss").hover(function(){
        $(this).toggleClass("questioninputcssHidden", 700);
    });



    $(document).hover(function(){
        $(this).toggleClass("questioninputcssHidden", 700);
    });



    $(document).hover(function(){
        $(this).toggleClass("questioninputcssHidden", 700);
    }, function(){
        $(this).toggleClass("questioninputcssHidden", 700);
    });

Answer 1

根据您的描述，您所要做的就是：

.questioninputcss:hover {
  //your desired hover styles in here (the styles you have on answerinputcssHidden)
}

如果您希望根据您的请求对其进行动画处理，则添加到基本元素的转换

.questioninputcss {
transition: 1s all;

基于你的小提琴，这是一个有效的例子 - http://jsfiddle.net/alexjm/kphq9ap2/9/

如果你想使用它，也不要使用hover（）jquery方法，因为它们会相互对抗。但是，如果您想使用悬停，如果您阅读文档 - 您遇到的问题是当鼠标进入并离开目标项目时悬停绑定到两者 - 请参阅此处以供参考http://api.jquery.com/hover/。

所以，你会做这样的事情 -

   $( ".questioninputcss" ).hover(
 function() {
    $( this ).addClass("questioninputcssHidden", 700);
 }, function() {
    $( this ).removeClass("questioninputcssHidden", 700);
 }
 );

见这里 - http://jsfiddle.net/alexjm/kphq9ap2/31/

使用jquery .hover，使用$ this

1 个答案: