使用 jquery .hover 和 $this

Question

这是我的 HTML 元素之一。

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

当我将鼠标悬停在一个元素上时，我希望该元素切换类

我也尝试了 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/