Question

我正在学习CSS并且正在编辑链接到CSS Zen Garden索引文件上的html的样式表。当我将鼠标悬停在h2标题上时，我试图让.summary div显示出来的CSS设计之美，但似乎无法使它工作。这是我的css：

   .page-wrapper {
   margin:0 auto;
   width:50%;
   }

   .summary p{
   display:none;
   visibility:hidden;
   }

   .intro header h2:hover .summary  p{
   display:block;
   visibility:visible;
   }

   .summary p:hover{
   display:block;
   visibility:visible;
   }

有人可以告诉我哪里出错了吗？如果我只是将它设置为.intro：悬停它可以工作，但这意味着将鼠标悬停在介绍中的任何元素上。顺便说一句，我意识到我可以使用.summary而不是.summary p。感谢...

Answer 1

了解CSS选择器的工作方式非常重要 - 最重要的是，它们不能流畅地遍历DOM，但只能用于隔离后代（嵌套子级）或后续邻接（同一DOM级别的元素，放在后面。）

这意味着您只能使用CSS根据DOM（HTML元素）顺序选择层次结构中的元素。

忽略CSS从右到左处理的事实，这意味着当你在CSS选择器中从左向右移动时，空格后面的每个规则代表一个后续的子元素。

此例外是~和+邻接选择器，它们基本上隔离了后来发生的指定类型的兄弟。

那么，这对你意味着什么？

当你表示悬停＆＃39;事件时，它意味着什么？在CSS中，您创建的规则只能直接与元素相关，该元素的子元素，后续兄弟元素或子元素的后续兄弟。

因此，除非您的DIV是您h1的孩子或紧跟在其之后，否则您无法创建CSS规则以使其显示在悬停状态。

我建议你也看看the MDN article on selectors，这是一个可靠的阅读

Examples using the + adjacency selector

Examples using the ~ adjacency selector

Examples using a child selector

您当前的规则：

   .intro header h2:hover .summary  p{
      display:block;
      visibility:visible;
   }

假设您p是.summary的孩子h2的孩子：

<div class='intro'>
    <header>
        <h2>
        <span class='summary'><p></p></span>
    </h2>
    </header>
</div>

在h2悬停时使div可见

1 个答案: