javascript - 图片 :focus doesn't stay focus in CSS

Question

result

我想让图片保持点击状态。

我为每个图标使用了两个图像。一个是什么时候没有被点击。另一个是何时单击。悬停工作正常。但焦点根本不起作用。

我没有看到任何错误或错误。请帮帮我!

这是 body

body{
	width:350px;
}

img {
  float:left;
  width:60px;
  height:50px;
}

#hardy{
  float:right;
}

.category{
  position: fixed;
  padding: 2em;
  left: 0;
  top: 0;
  background-color:white; /*Grey*/
  padding:13px;
  height:57px;
  width:100%;
  display:inline-block;
}

	
.img-top {
  display:none;
  z-index:99;
}


#restaurant:hover .img-top{
  display: inline;
}

#restaurant:hover .img-bottom{
  display:none;
}

#restaurant.img-top:focus {
  display: inline;
}
#restaurant.img-bottom:focus {
  display: none;
} 

#hotel:hover .img-top{
  display: inline;
}

#hotel:hover .img-bottom{
  display:none;
}

#pub:hover .img-top{
  display: inline;
}

#pub:hover .img-bottom{
  display:none;
}

#park:hover .img-top{
  display: inline;
}

#park:hover .img-bottom{
  display:none;
}

#tourism:hover .img-top{
  display: inline;
}

#tourism:hover .img-bottom{
  display:none;
}

<div class="listView">
  <div class="category">
    <span id="restaurant">
      <img src="./resources/icons/category/restaurant_list_icon.png" alt="restaurant" title="restaurant" class="img-bottom">
      <img src="./resources/icons/category/restaurant_list_selected_icon.png" alt="restaurant" title="restaurant" class="img-top">
    </span>
    <span id="hotel">
      <img src="./resources/icons/category/hotel_list_icon.png" alt="hotel" title="hotel" class="img-bottom">
      <img src="./resources/icons/category/hotel_list_selected_icon.png" alt="hotel" title="hotel" class="img-top">
    </span>
    <span id="pub">
      <img src="./resources/icons/category/pub_list_icon.png" alt="pub" title="pub" class="img-bottom">
      <img src="./resources/icons/category/pub_list_selected_icon.png" alt="pub" title="pub" class="img-top">
    </span>
    <span id="tourism">
      <img src="./resources/icons/category/tourism_list_icon.png" alt="tourism" title="tourism" class="img-bottom">
      <img src="./resources/icons/category/tourism_list_selected_icon.png" alt="tourism" title="tourism" class="img-top">
    </span>
    <span id="park">
      <img src="./resources/icons/category/park_list_icon.png" alt="park" title="park" class="img-bottom">
      <img src="./resources/icons/category/park_list_selected_icon.png" alt="park" title="park" class="img-top">
    </span>
  </div>
</div>

焦点似乎不起作用。只有悬停在工作。我已经通过 googld 寻找答案，但找不到。

谁能知道为什么焦点不起作用？谢谢你!!!

Answer 1

你添加的样式有误

#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}

当前样式是

#restaurant .img-top:focus {
   display: inline;
}
#restaurant .img-bottom:focus {
    display: none;
}

#restaurant ids main Div and .img-bottom is sub img tag