JSFIDDLE DEMO

Question

我想要完成的是一种通用的方法，只有在父母被徘徊时才能使某些东西变得可见。这是一个jsfiddle：http://jsfiddle.net/8kRsG/1/

标记在这里：

<div class="hover-parent">
    <div class="container">
        Hello world!
        <div class="hover-only">
            <h1>You're hovering container 1</h1>
        </div>
        <div class="hover-parent">
            <div class="container-2">
                <div class="hover-only">
                    <h2>You're Hovering container 2</h2>
                </div>
            </div>
        </div>
    </div>
</div>

这里有CSS：

.hover-parent:hover .hover-only {
    opacity: 1;
}
.hover-only {
    opacity: 0;
    transition: opacity 0.3s;
}

所以，它非常简单，除非你将hover-parent嵌套在另一个hover-parent中，否则嵌套的hover-only会被显示，即使它的直接父级没有被悬停，也可以。

所以，总而言之，我希望You're Hovering container 2仅在我悬停在container-2上时显示，而不是在我将鼠标悬停在container上时显示。只有CSS才有可能（例如，没有JavaScript / jQuery等等，并且不依赖于html的结构）。

Answer 1

直接后代选择器

.hover-parent:hover > div > .hover-only {
    opacity: 1;
}

注意：这假设您在<div>和hover-parent之间只有一个hover-only级别，因此如果无效，您可能需要进行调整

Answer 2

对于无限制的嵌套 - 悬停 - 父母，＆＃34;一般方式＆＃34;和独立的标记更好地使用这个

[class^=hover-parent]:hover  > [class^=container] >.hover-only {
    opacity: 1;
}

JSFIDDLE DEMO

添加孩子

<div class="hover-parent">
    <div class="container">
        Hello world!
        <div class="hover-only first">
            <h1>You're hovering container 1</h1>
        </div>
        <div class="hover-parent">
            <div class="container-2">
                <div class="hover-only second">
                    <h2>You're Hovering container 2</h2>
                </div>
                      <div class="hover-parent">
                           <div class="container-3">
                              <div class="hover-only third">
                              <h2>You're Hovering container 3</h2>
                           </div>
                      </div>
                 </div>
            </div>
        </div>
    </div>
</div>

JSFIDDLE DEMO 2

更新：根据您想要获得的内容使用通用选择器

[class^=hover-parent]:hover  > [class^=container] >.hover-only,
[class^=hover-parent]:hover  > [class^=container]  >*  >.hover-only{
    opacity: 1;
}

JSFIDDLE DEMO 3

Answer 3

斯蒂芬的回答是正确的。如果您仍然不确定如何处理它，请尝试this fiddle。

如果它仍然不起作用，请确保完全选择。

.activate-hover:hover > .show-on-hover {
    opacity: 1;
}

此外，HTML的功能可能不是以对您的样式规则有意义的方式进行结构化。

Answer 4

如果没有对DOM结构的某种依赖性，这在CSS中是不可能的。所以我最终做的是以下内容：

因为我使用Stylus，所以我能够做到这一点：

for layer in 1 .. 10
  .hover-parent-{layer}
    .hover-only-{layer}
      opacity 0
      transition opacity 0.2s
    &:hover
      .hover-only-{layer}
        opacity 1

这会生成以下CSS

.hover-parent-1 .hover-only-1 {
  opacity: 0;
  transition: opacity .2s;
}

.hover-parent-1:hover .hover-only-1 {
  opacity: 1;
}

.hover-parent-2 .hover-only-2 {
  opacity: 0;
  transition: opacity .2s;
}

.hover-parent-2:hover .hover-only-2 {
  opacity: 1;
}

/* etc... */

然后我可以这样做：

<div class="hover-parent-1">
  <h1 class="hover-only-1">This is container 1</h1>
  <div class="container hover-parent-2">
    <h2>This will always show up</h2>
    <div class="container">
      <div class="as-many-as-i-want">
        <i class="icon-awesome hover-only-2"></i>
      </div>
    </div>
  </div>
</div>

匹配CSS直到另一个匹配发生

4 个答案:

JSFIDDLE DEMO

JSFIDDLE DEMO 2

JSFIDDLE DEMO 3