Question

我试图在其父母悬停时显示一个隐藏的div 我的问题是有相同类的嵌套div，当我悬停一个“内部”div时，它的父元素也会悬停，并显示它们隐藏的子元素。
HTML：

<div class="a_class">
    lorem ipsum
    <div class="inner">
        <a href="">hidden...</a>
    </div>
    <div class="b_class">
        blahblah<br />
        <div class="a_class">
            <div class="inner">
                <a href="">hidden...</a>
            </div>
            lorem ipsum
        </div>
    </div>
</div>

的CSS：

.inner{display:none;}
.a_class:hover > .inner{display: block;}

小提琴：http://jsfiddle.net/Nb6tD/

换句话说，我正试图实现这个目标：当我将鼠标悬停在第二个.a_class上时，只有它下面的.inner应该出现，而不是“父”.a_class下的.inner。

只能用css吗？

提前致谢

编辑：答案
所以，看起来它不能用纯css完成，除非html标记改变 - 这在我的情况下是不可能的。我希望有一个css3-magic解决方案，但由于没有这样的选项，我会去javascript。

我接受了最合适的解决方案，以备将来参考，因为那里有可能改变html结构。

Answer 1

我不认为你可以在不改变html结构的情况下“修复”这个问题 - 你可以有一个包含可扩展区域及其相应按钮的元素：

在这里，我添加了一个.hoverArea div。（最里面的一个不需要额外的div，因为它只包含一个.inner）

HTML

<div class="a_class">
    <div class="hoverArea">
        lorem ipsum
        <div class="inner">
            <a href="">hidden...</a>
        </div>
    </div>
    <div class="b_class">
        blahblah<br />
        <div class="a_class hoverArea">
            <div class="inner">
                <a href="">hidden...</a>
            </div>
            lorem ipsum
        </div>
    </div>
</div>

CSS

.hoverArea:hover > .inner{
    display: block;
}

http://jsfiddle.net/Nb6tD/7/

演示

Answer 2

使用纯css是不可能的，因为你将鼠标悬停在父元素以及.a_class子元素上，然后它会显示两个块。

如果您可以在某种程度上更改html，那么可以轻松实现。

我对html所做的更改是：

我将完整的html代码包装在.block class element。
在启动.a_class元素之前关闭了父.b_class。

<强> CSS

.block, .block .b_class>.a_class {
    border: 1px solid red;
    padding: 15px;
}

Working fiddle

Answer 3

问题在于，当第二组嵌套在第一个.a_class内时，当您将鼠标悬停在第二个.a_class上时，第一个.a_class仍然悬停在上面。

因此，当时两个元素都被解释为悬停，这将触发正在发生的行为。

Answer 4

这样吗？（需要一些HTML更改）

http://jsfiddle.net/Nb6tD/6/

i {
    display: none;
}

.trick:hover >  i {
   display: inline;
}

Answer 5

对我有用

您只需要在要应用CSS的内部子项中指向或访问确切的标记或类例如：

.footer-custom-icons li:hover >  .iconlist-item-icon i, 
.footer-custom-icons li:hover > .iconlist-item-content p a 
{
   color: white !important;
}

同一类的嵌套div，在悬停时显示child

5 个答案:

HTML

CSS