css：hover只影响嵌套的顶部div [英] css :hover only affect top div of nest

问题描述

您好：有一些html喜欢：

Hi: got some html like:

<div class="class" >
    <div class="class" >
    </div>
</div>

和一些css喜欢：

div.class:hover
{
    border-width:2px;
    border-style:inset;
    border-color:red;
}

当我将鼠标悬停在内部div上时，两个div都会得到红色边框。是否可以停止传播并使用css获取内部div上的红色边框？

When I hover over the inner div, both divs get the red border. Is it possible to stop the propagation and get the red border on the inner div using css?

谢谢。

编辑：从borrible指向的答案开始：

EDIT : starting with the answer pointed to by borrible I ended up with:

    $("div.class").mouseover(
        function(e) {
            e.stopPropagation();
            $(this).css("border-color", "red");
        }).mouseout(
        function() {
            $(this).css("border-color", "transparent");
        });

耻辱不是css，但工作。感谢大家，没有得到我想要的，但学到了很多新的东西。是不是堆栈溢出：）

Shame it's not css but does the job. Thanks everyone, didn't get what I wanted but learned lots of new stuff. Ain't stack overflow great :)

推荐答案

如果内部 class 是直接子级，您可以使用> 。如果不是直接子，你可以使用空格。

If the inner class is immediate child you can use the >. If it's not immediate child you can use space.

所以在第一种情况下 .class> class：hover {} ，在第二种情况下 .class .class：hover {}

So in first case .class > class:hover { } and in second case .class .class:hover { }

第一种情况： http://jsfiddle.net/wp4Jf/

第二种情况： http://jsfiddle.net/wp4Jf/2

请记住> 适用于ie8 +

Keep in mind that > works for ie8+

这篇关于css：hover只影响嵌套的顶部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！