单击图像时CSS打开文本框

Question

我有一个 SharePoint 2010 网站，并且只想在维基页面中使用 CSS。

在我的页面上，我有一段信息，在它的末尾有一个问题。在观众阅读信息和问题后，我希望他们能够点击一张显示“答案”的图片。单击“答案”图像时，问题下方会出现一个带有答案的文本框。我希望答案保留在页面上，而不仅仅是悬停在图片上。

我的偏好是仅在 css 中执行此操作。我不认为我有能力在 javascript 中做到这一点。

我想我对这两种选择都持开放态度。如果是 javascript 可以内联完成吗？

Answer 1

正如@JofryHS 所提到的，css 并不真正响应点击。

使用内联 js 点击处理程序不是很好，因为它会让你不得不重复很多次，但从你正在与没有足够的 Sharepoint 访问权限(唉，公司网络)的事情的声音来看。

这使用内联点击处理程序来显示答案:

<div class="question" id="q1">
    What colour is the sky?
    <button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
    <div class="answer" id="q1Answer">
        Overcast and grey, because I live in the UK.
    </div>
</div>


<div class="question" id="q2">
    Why does it always rain on me?
    <button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
    <div class="answer" id="q2Answer">
    I'd have thought you figured this out already... It's Britain, of course it always rains on you!
    </div>
</div>

答案是使用 css 隐藏的(注意 .answer block 中的 display:none):

.answer {
    display:none;
    background-color:#e5e5ff;
    padding:15px;
}

.question {
    background-color:#f5f5f5;
    padding:15px;
    border-radius:5px;
    margin:7px;
}

本质上，onClick 所做的只是将答案的 css 从 display:none 更改为 display:block，使答案可见。

还有一点 css 让它看起来更 Shiny ，这里有一个演示 jsfiddle