javascript - 当您悬停 .container 时，它会更改两者的颜色。但我只想更改鼠标所在的容器

Question

我准备了这个：

http://jsfiddle.net/hXpWh/2/

当您悬停 .container 时，它会更改两者的颜色。但我只想更改鼠标所在的容器。

这是js代码：

moped = "";
$(".container").mouseenter(function () {
    $(".content").css('background', function () {
        moped = $(this).css('background');
        return "green";
    });}).mouseleave(function () {
    $(".content").css('background', function () {
        return moped;
    });
});

html:

<div class="container">
    <div class="content"></div>
    <div class="caption">
        <p>This is the caption of .container</p>
    </div>
</div>
<div class="container2">
    <div class="content"></div>
    <div class="caption">
        <p>This is the caption of .container2</p>
    </div>
</div>

CSS：

.container {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 800;
    width: 250px;
    height: 250px;
    padding: 0;
    margin: 0;
}
.container2 {
    position: absolute;
    top: 0;
    left: 255px;
    display: block;
    z-index: 800;
    width: 250px;
    height: 250px;
    padding: 0;
    margin: 0;
}
.content {
    display: block;
    background: red;
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
}
.caption {
    display: block;
    background: none;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
}
.caption p {
    position: relative;
    bottom: 10px;
    left: 10px;
}

Answer 1

其他答案显示了 jQuery 代码中的问题，但另一个解决方法是为此使用 CSS。

给外部元素一个公共类，然后：

.cont {
    background:red;
}
.cont:hover .content {
    background: green;
}

演示：http: //jsfiddle.net/hXpWh/4/

---

但是对于 jQuery 代码，不仅需要找到嵌套的.content，而且不需要变量。只需将背景设置""为mouseleave.

$(".container").mouseenter(function () {
    $(this).find(".content").css('background', "green");
}).mouseleave(function () {
    $(this).find(".content").css('background', "");
});

Answer 2

在函数中更改$(".content")为，它只会更改您悬停的那个。您可以将其更改为，但根据评论中的 epascarello ，它效率不高。$(this).find(".content").mouseenter$(".content", this)

Answer 3

好吧，您可以移动 css 背景属性或执行以下操作：

moped = "";
$(".container").mouseenter(function () {
   $(this).children(".content").css('background', function () {
        moped = $(this).css('background-color');
        return "green";
    });
}).mouseleave(function () {
    $(this).children(".content").css('background', function () {
        return moped;
    });
});

我的建议是使用脚本并重构它，分别使用.hover()和命名mouseenterandmouseout函数。祝你好运，伙计。