Question

我有一个mouseenter功能，可以将所选的div变为红色和1个不透明度。我有一个“完整”类，但是当我在mouseenter中添加该类时，div不会改变颜色。相反，如果我添加红色并使用this.style.color和this.style.opacity更改mouseenter中的不透明度，那么它似乎有效。我的问题是为什么？

jquery（不工作）：

$('.content').mouseenter(function() {

    $( ".content" ).each(function (i) {
        if ( this.style.color != "#F7F7F7" ) {
            this.style.color = "#F7F7F7";
            this.style.opacity = "0.5";
        }
    });

    this.addClass('full');

});

的jquery（的 WORKING ）：

$('.content').mouseenter(function() {

    $( ".content" ).each(function (i) {
        if ( this.style.color != "#F7F7F7" ) {
            this.style.color = "#F7F7F7";
            this.style.opacity = "0.5";
        }
    });

    this.style.color = "red";
    this.style.opacity = "1";

});

CSS：

.full 
{
color: red;
opacity: 1;
}

Answer 1

this不是mouseenter方法回调中的jquery集合。您需要使用$(this)。

Answer 2

有几个问题;一个是this不是处理程序中的jQuery对象。另一个是你的style规则总是优先于类*。我真的不知道上下文是什么，但是看起来你应该默认使用这些颜色并添加和删除类：

var $content = $('.content');

$content.mouseenter(function() {
    $content.removeClass('full');
    $(this).addClass('full');
});

虽然使看起来像你的CSS应该更少.full和更多:hover，但根本没有JavaScript。（这是最好的JavaScript。）

^{*没有!important，你永远不应该使用它。}

Answer 3

this应该像jQuery(this)一样使用。

使用：

$('.content').mouseenter(function() {

  $( ".content" ).each(function (i) {
    if ( this.style.color != "#F7F7F7" ) {
        this.style.color = "#F7F7F7";
        this.style.opacity = "0.5";
    }
  });

  jQuery(this).addClass('full');

});

Answer 4

您正在使用javascript设置内联样式。这些将总是否决课堂风格。

addClass（）在mouseenter（）中不起作用？

4 个答案: