Question

我有css：

.frame{
    height:200px;
    width:200px;
    border-style:solid;
    border-width:3px;
}

.test2{
    opacity:0;
}

我有html

<div class="frame">
<span class="test test2">qwerty</span>
</div>

当鼠标超过.frame时，我想将.test2类删除到.test，当鼠标离开时，我想将.test2添加到.test。所以我的jQuery代码是：

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this),
    mEnt  = e.type == "mouseenter";
    if(mEnt == true){
        el.find('.test').removeClass('test2');
    }else{
        el.find('.test').addClass('test2');
    }
});

但它不起作用.test2不想从.test中删除。这里有一个jsfiddle：http://jsfiddle.net/malamine_kebe/EmE7p/

Answer 1

您忘记了$中的el，$el

$(document).on('mouseenter mouseleave', '.frame', function (e) {
    var $el = $(this),
        mEnt = e.type == "mouseenter";
    if (mEnt == true) {
        $el.find('.test').removeClass('test2');
    } else {
        $el.find('.test').addClass('test2');
    }
});

演示here

对此最好的解决方案可以是简单的 CSS （并且不需要jQuery），如下所示：

.test {
    opacity:0;
}
.frame:hover .test {
    opacity:1;
}

演示here

Answer 2

首先：除非你需要支持IE7和更早，否则你真的应该在你的CSS中使用:hover：

.frame{
    height:200px;
    width:200px;
    border-style:solid;
    border-width:3px;
}

.frame .test {
    opacity: 0;
}

.frame:hover .test {
    opacity: 1;
}

但是如果您想在JavaScript中执行此操作，则代码的问题在于您在一个位置使用$el元素，而在其他位置使用el。你需要保持一致。您应该在JavaScript控制台中看到错误。您也不需要mEnt变量，在测试条件时也不需要使用== true。

所以：

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this);
    if(e.type == "mouseenter"){
        $el.find('.test').removeClass('test2');
    }else{
        $el.find('.test').addClass('test2');
    }
});

Answer 3

变量为$el，但在removeClass上调用el方法。

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this),
    mEnt  = e.type == "mouseenter";
    if(mEnt == true){
        $el.find('.test').removeClass('test2');
    }else{
        $el.find('.test').addClass('test2');
    }
});

JS小提琴： http://jsfiddle.net/EmE7p/3/

Answer 4

使用此：

$(".frame").hover(
  function () {
    //here mouse enter
  },
  function () {
    //here mouse leave
  }
);

jQuery，与removeClass问题

4 个答案: