Question

我有一个常见问题解答，希望只在问题悬停时才能显示每个问题的答案。我想用HTML和CSS来做这件事。

贝娄，你可以看到我写的东西。我选择将每个问题包装在faq类中，以便我只能在每个问题中选择p个。当我悬停h3时没有任何事情发生。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

            .faq p {
                display: none;
            }

            .faq h3:hover .faq p {
                display: block;
            }

        </style>
    </head>
    <body>
        <div class="faq">
            <h3>foo?</h3>

            <p>bar, bar</p>
            <p>bar, bar</p>
            <p>bar, bar</p>
        </div>

        <div class="faq">
            <h3>baz?</h3>

            <p>bar, bar</p>
        </div>
    </body>
</html>

我知道悬停标题可能不是最好的选择，因为如果用户去徘徊答案，答案就会消失。我可以稍后处理。现在我只是感到困惑，为什么这不起作用。

谢谢！

Answer 1

使用.faq h3:hover .faq p，您试图在悬停的.faq中选择另一个h3元素，该元素不存在。

相反，请尝试使用此css选择器~：

＆＃13;

.faq p {
    display: none;
}

.faq h3:hover ~ p {
    display: block;
}

＆＃13;

<div class="faq">
            <h3>foo?</h3>

            <p>bar, bar</p>
            <p>bar, bar</p>
            <p>bar, bar</p>
        </div>

        <div class="faq">
            <h3>baz?</h3>

            <p>bar, bar</p>
        </div>

＆＃13;

Answer 2

您可以使用~选择器：

选择每个 <p> 元素，其前面是从here
编辑的 h3:hover 元素〜

.faq h3:hover ~ p {
  display: block;
}
.faq p {
  display: none;
}
.faq h3:hover .faq p {
  display: block;
}

<div class="faq">
  <h3>foo?</h3>

  <p>bar, bar</p>
  <p>bar, bar</p>
  <p>bar, bar</p>
</div>

<div class="faq">
  <h3>baz?</h3>

  <p>bar, bar</p>
</div>

使用CSS将鼠标悬停在标题上时展开常见问题解答

2 个答案: