-1

我有一个 mouseenter 函数，它将选定的 div 变为红色和 1 不透明度。我有一个“full”类，它就是这样做的，但是当我在 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（工作）：

$('.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;
}
4

4 回答 4

7

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

于 2013-07-16T16:17:31.587 回答
4

有几个问题；一个是它this不是处理程序中的 jQuery 对象。另一个是您的style规则将始终优先于类*。我真的不知道上下文是什么，但似乎您应该默认将它们设为所有颜色并添加和删除类：

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

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

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

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

于 2013-07-16T16:19:25.440 回答
1

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');

});
于 2013-07-16T16:18:46.437 回答
0

您正在使用 javascript 设置内联样式。这些将永远推翻类样式。

于 2013-07-16T17:00:50.527 回答