Question

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

我为每个图标使用两个图像。一个是没有点击的时候。另一个是点击时。悬停工作正常。但重点根本不起作用。

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

这是身体

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主要Div和.img-bottom是sub img标签

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

悬停并点击

焦点伪类不会起作用，因为当光标悬停时，悬停伪类会改变元素的状态。

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

＆＃13;

<!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>

＆＃13;

img：焦点不会停留在CSS中

3 个答案: