尝试使用CSS（活动）和JavaScript在点击时显示内容。 如何保持内容显示？

Question

I feel like this is incredibly simple but I'm just not quite getting it.

What I'm trying to do: When you click on a circle image, text will show up below it and will stay there until another circle image is clicked on.

This is what I have so far... https://codepen.io/elamen/pen/wYGwGw

<div class="boxes">
<img src="http://www.conejousd.org/portals/0/Images/EnrollCVUSD/2017/school-logos/school-sm-aspen.png" style="width: 150px;">
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
<div class="boxes">
<img src="http://www.conejousd.org/portals/0/Images/EnrollCVUSD/2017/school-logos/school-sm-aspen.png" style="width: 150px;">
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
<div class="boxes">
<img src="http://www.conejousd.org/portals/0/Images/EnrollCVUSD/2017/school-logos/school-sm-aspen.png" style="width: 150px;">
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>


.boxes {
opacity: 0.5;
float: left;
width: 200px;
height: 130px;
overflow: hidden;
}

.boxes:active {
opacity: 1;
height: auto;
}

$('.boxes > a').click(function() {
$('.boxes').removeClass('hovered');
$(this).parent().toggleClass('hovered');
});

Answer 1

I'm unsure why you used boxes:active in your CSS as the active box, so if you change that to '.hovered', it works as expected. Also, I don't quite understand how your jQuery is working in the first place since the event listener is pointing to an 'a' element rather than an 'img'.

In any case, here is a working pen for your reference.

https://codepen.io/chrisaronchick/pen/MPyWgQ

Here is the CSS:

.boxes {
  opacity: 0.5;
  float: left;
  width: 200px;
  height: 130px;
  overflow: hidden;
}

.hovered {
  opacity: 1;
  height: auto;
}

Here is the JavaScript:

$('.boxes > img').click(function() {
  $('.boxes').removeClass('hovered');
  $(this).parent().toggleClass('hovered');
});