HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>爱奇艺</title><link href="爱奇艺.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div><div class="two"><img id="pic" src="秋蝉.png" alt=""></div><div class="one"><ul><li href="秋蝉.png" onmouseover="changepicture(this)">秋蝉</li><li href="成化十四年.png" onmouseover="changepicture(this)">成化十四年</li><li href="猎狐.png" onmouseover="changepicture(this)">猎狐</li><li href="天醒之路.png" onmouseover="changepicture(this)">天醒之路</li><li href="青你2.png" onmouseover="changepicture(this)">青你2</li><li href="王牌对王牌.png" onmouseover="changepicture(this)">王牌对王牌</li><li href="彼岸花.png" onmouseover="changepicture(this)">彼岸花</li></ul></div>
</div>
<script>function changepicture(which) {var ph=document.getElementById("pic");var link=which.getAttribute("href");ph.setAttribute("src",link);}
</script>
</body>
</html>
CSS
ul{list-style: none;background-color: rgba(37, 33, 24, 0.521);margin: 0px;padding: 0px;height: 550px;cursor:pointer;
}
li{width: 180px;height: 25px;color: rgb(250, 248, 248);font-size: 18px;padding-top: 15px;margin-left: 34px;
}
img{width: 1102px;height: 550px;cursor:pointer;
}
.one{position: absolute;left: 860px;display: inline-block;
}
.two{display: inline-block;
}
li:hover{background-color: rgba(30, 26, 26, 0.6);transform: scale(1.4);
}
效果图
