img:focus 没有专注于 CSS

Question

result

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

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

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

这是正文

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

Answer 2

改用javascript。下面是一个示例实现。我用的是文字而不是图片，因为我这里没有图片，只需用你的图片替换即可。

HTML代码应该是这样的

<ul>
        <li><a href="" class="clickme" id="item1">Item 1 <!--add your original image here--></a></li>
        <li><a href="" class="clickme" id="item2">Item 2 <!--add your original image here--> </a></li>
</ul>

CSS

.selected#item1{color:#f00; /*you can use background: url(yourimagepath); here instead of color */}
.selected#item2{color:#0f0; /*you can use background: url(yourimagepath); here instead of color */}

JS

$('.clickme').on('click',function(e){ 
   e.preventDefault();

  $('.clickme').removeClass('selected');
  $(this).addClass('selected'); 
});

这是一个working sample in jsfiddle

Answer 3

悬停并单击

焦点伪 class 将不起作用，因为悬停伪 class 会在光标悬停时更改元素的状态。

因此，为了完成此任务，我们可以创建一个自定义 class（下面示例中的 selected -- 运行代码段）使用 jquery 并根据点击事件添加或删除它。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>peedikayil</title>
 <style>
  img{ width:200px; overflow:hidden; }
  .clickme:hover #item1{display: inline;}
  .clickme:hover #item2{display: none;}
  .clickme #item1{display:none;}
  .clickme #item2{display:inline;}
  .selected #item1{display:inline;}
  .selected #item2{display:none;}
   
 </style>
</head>
<body>
 <a href="" class="clickme">

  <span id="item1">
   <img src="http://www.clker.com/cliparts/3/7/7/f/1268838238959637666link-zelda_red_mini-hi.png" alt="restaurant" >
  </span>

  <span  id="item2">
   <img src="https://static.giantbomb.com/uploads/scale_small/0/5128/318633-zww_link11.jpg" alt="restaurant" >
  </span>
    
 </a>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>

  $(document).ready(function(){
    var clicked = false;
    
    $('.clickme').on('click',function(e){ 
   
   e.preventDefault();
     
   this.clicked = !(this.clicked);
    
   if(this.clicked){ 
     $('.clickme').addClass('selected');
     }else{
     $('.clickme').removeClass('selected');
     }
        
   });

  });

 </script>
</body>
</html>

img:focus 没有专注于 CSS

img:focus doesn't stay focus in CSS

html

javascript

css

jquery

focus