代码工作正常。它的作用是隐藏一些东西，在这种情况下是答案。点击问题后，它会显示答案。无论如何 - 一旦它点击了什么我一直试图做的事情，我想问题和答案是不同的 - 比如有不同的背景颜色，或问题和答案周围的红色边框 - 从中描绘它的东西其余的问题。一旦我点击其他东西，它就会消失。我一直试图在CSS中做到这一点，但不能这样做。
<head>
<meta charset="utf-8">
<title> THis is the title </title>
<style>
.clicker {
border-style: solid;
border-width: 1px;
display: inline-block;
padding: 5px ;
outline:none;
cursor:pointer;
}
.hiddendiv{
display:none;
padding: 5px;
}
.clicker:focus + .hiddendiv{
dispay:block;
}
</style>
</head>
<body>
<h2> Flashcards</h2>
<div class="clicker" tabindex="1">
<p>This is the first question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png"/>
</div>
<p> </p>
<div class="clicker" tabindex="1"> <p>Second question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png"/>
</div>
<p> </p>
</body>
</html>
解决了你的问题。请运行以下代码。我希望你只是在寻找这个功能。
<html>
<head>
<meta charset="utf-8">
<title> THis is the title </title>
<style>
.clicker {
border-style: solid;
border-width: 1px;
display: inline-block;
padding: 5px;
outline: none;
cursor: pointer;
}
.hiddendiv {
display: none;
padding: 5px;
}
.clicker:focus+.hiddendiv {
display: block;
border: 1px solid blue;
}
.clicker:focus {
background: green;
border: 1px solid blue;
}
</style>
</head>
<body>
<h2> Flashcards</h2>
<div class="clicker" tabindex="1">
<p>This is the first question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>
<div class="clicker" tabindex="1">
<p>Second question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>
</body>
</html>您可以尝试以下方法：
.clicker {
border-style: solid;
border-width: 1px;
display: inline-block;
padding: 5px;
outline: none;
cursor: pointer;
}
.hiddendiv {
display: none;
padding: 5px;
}
/* Highlight focused question */
.clicker:focus {
background-color: green;
border: 2px solid darkgray;
color: white;
}
/* Highlight focused answer */
.clicker:focus+.hiddendiv {
display: block;
background-color: darkgray;
border: 2px solid green;
}<h2> Flashcards</h2>
<div class="clicker" tabindex="1">
<p>This is the first question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>
<div class="clicker" tabindex="1">
<p>Second question </p>
</div>
<div class="hiddendiv">
<img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>