サムネイルをhoverすると画像が変わる

WEB便利

Java​Scriptを使わないで表示する一番簡単な方法

<!doctype html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>サムネイルをhoverすると画像が変わる</title>
	<style>
@charset "UTF-8";
/* CSS Document */
html, body, ul, li, h1, h2, p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
}
ul {
	list-style-type: none;
}
img {
	vertical-align: bottom;
}
.container {
	width: 950px;
	margin: 0px auto;
}
ul {
	display: flex;
}
</style>
	</head>

	<body>
    <div class="container">
      <p class="mainImg"><img src="img/cover.jpg" alt="" id="mainImg"></p>
      <ul class-"thumnail">
        <li><img src="img/s01.jpg" alt="" onmouseover="mainImg.src='img/01.jpg'" onmouseout="mainImg.src='img/cover.jpg'"></li>
        <li><img src="img/s02.jpg" alt="" onmouseover="mainImg.src='img/02.jpg'" onmouseout="mainImg.src='img/cover.jpg'"></li>
        <li><img src="img/s03.jpg" alt="" onmouseover="mainImg.src='img/03.jpg'" onmouseout="mainImg.src='img/cover.jpg'"></li>
        <li><img src="img/s04.jpg" alt="" onmouseover="mainImg.src='img/04.jpg'" onmouseout="mainImg.src='img/cover.jpg'"></li>
        <li><img src="img/s05.jpg" alt="" onmouseover="mainImg.src='img/05.jpg'" onmouseout="mainImg.src='img/cover.jpg'"></li>
      </ul>
    </div>
</body>
</html>

参考サイト
https://web-felica.hatenablog.com/entry/2019/05/16/%E7%94%BB%E5%83%8F%E7%BD%AE%E6%8F%9B

タイトルとURLをコピーしました