8

我试图在其父级悬停时显示一个隐藏的 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 结构的人。

4

5 回答 5

7

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

在这里，我添加了一个.hoverAreadiv。（最里面的不需要额外的 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/

于 2013-09-16T13:22:51.847 回答
1

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

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

i {
    display: none;
}

.trick:hover >  i {
   display: inline;
}
于 2013-09-16T13:15:00.703 回答
1

纯 css 不可能，因为您将鼠标悬停在父元素和.a_class子元素上，然后它当然会显示两个块。

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

我对 html 所做的更改是：

  • 我将完整的 html 代码包装在.block类元素中。
  • 在元素.a_class开始之前关闭父级。.b_class

CSS

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

工作小提琴

于 2013-09-16T13:21:49.773 回答
1

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

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

于 2013-09-16T13:22:05.820 回答
0

这个对我有用

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

.footer-custom-icons li:hover >  .iconlist-item-icon i, 
.footer-custom-icons li:hover > .iconlist-item-content p a 
{
   color: white !important;
}
于 2019-06-15T07:05:18.720 回答