<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
ul {
list-style: none;
}
.content {
/* 400px; */
margin-left: 200px;
}
.content ul > li {
padding: 23px 0;
border-bottom: 1px solid gray;
}
.content ul li:last-child {
border: 0;
}
.content li a {
text-decoration: none;
margin-left: 35px;
color: #666;
font-weight: bold;
}
.content li a:hover {
color: red;
}
.box {
600px;
height: 200px;
margin: 20px auto;
position: relative;
border: 1px solid gray;
}
.pic {
float: left;
200px;
height: 200px;
}
.pic img {
200px;
height: 200px;
}
.tit {
position: absolute;
top: -12px;
right: 14px;
100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background-color: green;
}
.tit_after {
border-top: 10px solid transparent;
border-bottom: -1px solid transparent;
border-left: 10px solid green;
position: absolute;
top: -11px;
right: 4px;
z-index: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/01.jpg" alt="" id="img">
</div>
<div class="content">
<ul>
<li class="li"><a href="###">健身后吃什么补充优质蛋白质？这4</a></li>
<li class="li"><a href="###">什么是蛋白粉？蛋白粉哪个牌子好？</a></li>
<li class="li"><a href="###">南方春节食物的寓意</a></li>
</ul>
</div>
<div class="tit">
<span>食品安全</span>
</div>
<div class="tit_after"></div>
</div>
<script>
var lis = document.getElementsByClassName("li");
var img = document.getElementById("img");
for(var i=0;i<lis.length;i++) {
lis[i].index = i;
lis[i].onmouseover = function() {
img.src = "images/0"+(this.index+1)+".jpg";
}
}
</script>
</body>
</html>