jQUery メモ hover btn 表示 & 画像入れ替え

<style>

.box-1{width: 100%;}
.box-1a{width: 44%;float: left;background-image:url(../images/kaiga_on.jpg);padding: 11em 5em;}
.box-1b{width: 44%;float: left;margin: 0 3em;}

.show{display: block;}
.hide{display: none;}
.btn{background: #328bda;color: #fff;padding: 0.5em 1em;width: 50%;text-align: center;}
.btn2{background: #328bda;color: #fff;padding: 0.5em 1em;width: 50%;text-align: center;}

</style>

 

<section>
<div class="box-1">
<div class="box-1a">
<p class="btn"><a href="<?php echo get_permalink(); ?>">ボタン</a></p>
</div>
<div class="box-1b"><img src="<?php echo get_template_directory_uri(); ?>/images/kaiga_on.jpg">
<p class="btn2"><a href="<?php echo get_permalink(); ?>">ボタン2</a></p>
</div>
</div>
</section>

 

----

js

jQuery(function(){
jQuery('.box-1a p img').hover(function(){
jQuery(this).attr('src', jQuery(this).attr('src').replace('_off', '_on'));
}, function(){
if (!jQuery(this).hasClass('currentPage')) {
jQuery(this).attr('src', jQuery(this).attr('src').replace('_on', '_off'));
}
});
});

jQuery(function(){
jQuery('.btn').addClass('hide');
jQuery('.box-1a').hover(
function(){
jQuery('.btn').removeClass('hide');
jQuery('.btn').addClass('show');
},
function(){
jQuery('.btn').removeClass('show');
jQuery('.btn').addClass('hide');
}
);
});