<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* #pic{
display: none;
} */
</style>
</head>
<body>
<button id="control">show/hide</button>
<img src="images/img0.png" alt="" id="pic">
<script src="lib/jquery-2.2.2.js"></script>
<script>
$(function(){
// $('#pic').mouseover(function(){
// this.src='images/img1.png';
// }).mouseout(function(){
// this.src='images/img0.png';
// });
// $('#pic').hover(function(){
// this.src='images/img1.png';
// },function(){
// this.src='images/img0.png';
// });
var $p=$('#pic');
$('#control').click(function(){
// if($p.is(':visible')){
// $p.css('display','none');
// }else{
// $p.css('display','inline');
// }
$p.toggle();
});
});
</script>
</body>
</html>