我把 div 藏在 php 里面没用

Question

.dq {
  display: none;
}

#s:hover~ .dq {
  display:block;
}

我在 PHP 中有此代码：

echo "
  <div class='span3 tiny'>
    <div class='pricing-table-header-tiny'>
      <h2>" . $row['Question'] . "</h2>  
    </div>
    <div class='dq'>
      <div class='pricing-table-features'>
        <p>" . $row['Answer'] . "</p>
      </div>
      <div class='Dass'>
        <p id='Dassp'>Answered by:" . $row['Doctor'] . "<p>
      </div>
    </div>
    <a id='s'>Show answer</a>
  </div>";
}

其中一些来自我的 sql table。我想要实现的是，当我单击显示答案时，我希望显示答案。默认使用 css 隐藏。上面给出的最多的是 css 片段。知道哪里出了问题吗？我该如何实现？

Answer 1

将 a 标签放在 .dq class 上方。这样 sibling selector 就可以工作了。

.dq {
  display: none;
}
#s:hover~ .dq {
  display: block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

<div class='span3 tiny'>
  <div class='pricing-table-header-tiny'>
    <h2>" Question : whats is the question ?"</h2>


  </div>
  <a id='s'>Show answer</a>
  <div class='dq'>
    <div class='pricing-table-features'>
      <p>" Hi this is the answer "</p>
    </div>
    <div class='Dass'>
      <p id='Dassp'>Answered by: "Kim"
        <p>
    </div>
  </div>

</div>

为活跃状态 //

您必须将 a 标签设置为 link 才能在 ':active 状态下工作。

<a href="" id="s">

并为 :focus 状态写样式

#s:active~ .dq,  #s:focus~ .dq{
      display: block;
    }

.dq {
  display: none;
}
a{
  text-decoration: none;
 }
#s:active~ .dq,  #s:focus~ .dq{
  display: block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

<div class='span3 tiny'>
  <div class='pricing-table-header-tiny'>
    <h2>" Question : whats is the question ?"</h2>


  </div>
  <a id='s' href="#">Show answer</a>
  <div class='dq'>
    <div class='pricing-table-features'>
      <p>" Hi this is the answer "</p>
    </div>
    <div class='Dass'>
      <p id='Dassp'>Answered by: "Kim"
        <p>
    </div>
  </div>

</div>

Answer 2

what i want to achieve is when i click the show answer i want the answer to be shown.

嗯，你的做法是错误的。正如@jinu-kurian.

所指出的，您的 css 正试图在悬停上工作，而 html 结构无论如何都是错误的

如果你想让它在用户点击时起作用 "show answer" 你可以使用这个方法：

向 link 添加一个 href href="#answer"
为答案添加一个 id div id="answer"
然后添加 css:

#answer { 显示：none； } #answer:target { 显示：块； }

我把 div 藏在 php 里面没用

my hiding div inside php not working

html

css

php

hide