0

我有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，当鼠标在 leave.frame 上时，我想将 .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/

4

4 回答 4

3

你忘记了$，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');
    }
});

演示在这里

最好的解决方案是纯CSS（不需要 jQuery），如下所示：

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

演示在这里

于 2013-09-13T15:37:47.260 回答
2

第一：除非您需要支持 IE7 和更早版本，否则您确实应该:hover在 CSS 中使用：

.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');
    }
});
于 2013-09-13T15:38:03.997 回答
1

变量是$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/

于 2013-09-13T15:37:46.840 回答
-2

用这个：

$(".frame").hover(
  function () {
    //here mouse enter
  },
  function () {
    //here mouse leave
  }
);
于 2013-09-13T15:38:03.840 回答