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

Answer 2

CSS4将使用感叹号来允许父元素的样式 - 使用CSS4添加一个规则。 http://www.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

div {
    padding: 5px;
    border: 1px solid black;
}
div:hover {
    background: green;
}
div! div { /* if a div contains a div apply this rule to parent div*/
    background: white;
}

并且有一个lib已经在不是来自未来的浏览器上支持它。

<script src="jQuery.cssParentSelector.js"></script>

Answer 3

如果你想使用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＆＃39的解决方案更好，只有在你需要额外的效果时才使用jquery。

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

3 个答案: