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

【问题标题】：When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on当您悬停 .container 时，它会更改两者的颜色。但我只想更改鼠标所在的容器
【发布时间】：2013-06-01 01:14:15
【问题描述】：

我准备了这个：

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;
}

【问题讨论】：

在你完成了其中两个之后再从你的小提琴中复制一个 sn-p 代码会不会杀了你？

标签： javascript jquery html css-selectors

【解决方案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', "");
});

【讨论】：

【解决方案2】：

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

【讨论】：

上下文选择器性能差，最好用$(this).find(".content")
@epascarello 哦，我不知道。谢谢你，我会根据建议的用途更新答案。
这就是我想要的。谢谢。这就是解决方案：jsfiddle.net/hXpWh/5
我刚刚做了一个基准测试，Chrome 28 的差异在 6% 左右。不大，但也不容忽视。 jsperf.com/context-vs-find-js-or-jq
@Barmar 我喜欢了解这样的性能，所以我以后肯定会记住这一点。

【解决方案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() 并分别命名mouseenter 和mouseout 函数。祝你好运，伙计。

【讨论】：