实现的功能：
鼠标移入切换对应图片，并自身改变样式
可以自己增加过渡动画，会更舒服些。
上代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>explore</title>
<style>
* {
margin: 0;
padding: 0;
}
.explore {
width: 1440px;
margin: 0 auto;
}
.explore h2 {
font-size: 38px;
text-align: center;
margin-bottom: 140px;
}
.explore .imglist {
position: relative;
}
.explore .imglist li {
position: absolute;
overflow: hidden;
}
.explore .imglist li img {
transition: all .3s;
}
.explore .imglist li img:hover {
transform: scale(1.1);
}
.explore .imglist>.active {
z-index: 1;
}
.explore article {
display: flex;
width: 684px;
border-top: 2px black;
padding: 30px 0 0 20px;
cursor: pointer;
margin: 20px 0 20px 710px;
}
.explore article span {
margin-right: 55px;
}
.explore article div p {
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
}
.explore article div a {
display: table;
font-size: 14px;
font-weight: 700;
color: #000;
margin-bottom: 30px;
display: none;
}
</style>
</head>
<body>
<section class="explore">
<h2>Explore #DoWhatYouCant</h2>
<ul class="imglist">
<li class="active"><img src="./images/explore/explore-00.jpg" alt=""></li>
<li><img src="./images/explore/explore-01.jpg" alt=""></li>
<li><img src="./images/explore/explore-02.jpg" alt=""></li>
</ul>
<article class="explorelist">
<span>01</span>
<div>
<p>当Samsung Galaxy遇见Maison Kitsuné小狐狸</p>
<a href="#">了解更多</a>
</div>
</article>
<article class="explorelist">
<span>02</span>
<div>
<p>开箱一刻，探索无限</p>
<a href="#">了解更多</a>
</div>
</article>
<article class="explorelist">
<span>03</span>
<div>
<p>塑造一个更美好的地球</p>
<a href="#">了解更多</a>
</div>
</article>
</section>
</body>
<script>
let explore = document.getElementsByClassName("explore")[0];
let explorelist = explore.getElementsByClassName("explorelist");
let alist = explore.getElementsByTagName("a");
let imglist = explore.getElementsByTagName("li");
for (let i = 0; i < explorelist.length; i++) {
explorelist[i].addEventListener("mouseover", function () {
for (let j = 0; j < explorelist.length; j++) {
alist[j].style.display = "none";
explorelist[j].style.borderTopStyle = "none";
imglist[j].classList.remove("active");
}
if (this == explorelist[i]) {
alist[i].style.display = "block";
explorelist[i].style.borderTopStyle = "solid";
imglist[i].classList.add("active");
}
});
}
</script>
</html>