javascript - 不要将悬停效果应用于父级

Question

我想更改鼠标光标所在的 div 的颜色。但只有一个元素，我不想将新颜色应用到父元素。

我尝试了这个，但我不知道如何解决这个问题。

HTML:

<div>
    <div>a</div>
    <div>b</div>
    <div>
        <div>c</div>
        <div>d</div>
    </div>
</div>
<div>
    e
</div>

CSS:

div {
    padding: 5px;
    border: 1px solid black;
}
div:hover {
    background: green;
}

JSFiddle:http://jsfiddle.net/Lurwp7ey/

Answer 1

你可以试试这个。

HTML:

<div>
<div class="c">a</div>
<div class="c">b</div>
<div>
    <div class="c">c</div>
    <div class="c">d</div>
</div>
</div>
<div class="c">
e
</div>

CSS:

div {
    padding: 5px;
    border: 1px solid black;
}
.c:hover {
    background: green;
}

Fiddle .