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

我想更改鼠标光标所在的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/

最佳答案

如果要使用jQuery，则为:

$(".not_parent").hover(function(e){
    $(this).css("background-color","green");
    e.stopPropagation();
    },function(e){
    $(this).css("background-color","white");
        e.stopPropagation();
  });

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

http://jsfiddle.net/Lurwp7ey/3/

@chris的解决方案更好，仅在需要其他效果时才使用jquery。

关于javascript - 不要将悬停效果应用于父级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25958811/