マウスホバーテスト

by dxokoya

HTML

<div class="contents-area">
	<div class="contents-row">
		<div id="contents-title-name1">
			テスト１
		</div>
	</div>
	<p> </p>
	<div class="contents-row">
		<div id="contents-title-name2">
			テスト２
		</div>		
	</div>
  <div class="contents-title-image-dummy"><img src="https://placehold.jp/999999/ffffff/300x150.png?text=%E3%83%86%E3%82%B9%E3%83%88"></div>
  <div class="contents-title-image" id="contents-title-image1"><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=%E3%83%86%E3%82%B9%E3%83%881"></div>
  <div class="contents-title-image" id="contents-title-image2"><img src="https://placehold.jp/3e7056/ffffff/300x150.png?text=%E3%83%86%E3%82%B9%E3%83%882"></div>

CSS

.contents-title-image-dummy {
  position: absolute;
  top: 0;
  right: 0;
}
.contents-title-image {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
}
.contents-title-image.isHover {
  visibility: visible;
}

JavaScript

$(function(){
  $("#contents-title-name1").mouseover(function(e) {
    $("#contents-title-image1").addClass("isHover");
  })
  $("#contents-title-name1").mouseout(function(e) {
    $("#contents-title-image1").removeClass("isHover");
  })
  $("#contents-title-name2").mouseover(function(e) {
    $("#contents-title-image2").addClass("isHover");
  })
  $("#contents-title-name2").mouseout(function(e) {
    $("#contents-title-image2").removeClass("isHover");
  })
});