<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<title>Jquery案例</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
font-size: 14px;
}
div{
margin: 100px auto;
border: solid pink 1px;
position: relative;
width: 302px;
height: 250px;
overflow: hidden;
}
li{
width: 50px;
height: 27px;
background: url("images/lili.jpg") repeat-x;
border-bottom: pink solid 1px;
}
ul:first-child{
float: left;
}
ul:last-child{
float: right;
}
a{
display: block;
width: 50px;
height: 25px;
line-height: 27px;
text-align: center;
text-decoration: none;
color: black;
}
img{
width: 200px;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 50px;
border-left: solid pink 1px;
border-right: solid pink 1px;
}
</style>
</head>
<body>
<div class="contain">
<ul>
<li>
<a href="#">女靴</a>
<a href="#"><img src="images/女靴.jpg" alt=""/></a>
</li>
<li>
<a href="#">雪地靴</a>
<a href="#"><img src="images/雪地靴.jpg" alt=""/></a>
</li>
<li>
<a href="#">冬裙</a>
<a href="#"><img src="images/冬裙.jpg" alt=""/></a>
</li>
<li>
<a href="#">呢大衣</a>
<a href="#"><img src="images/呢大衣.jpg" alt=""/></a>
</li>
<li>
<a href="#">毛衣</a>
<a href="#"><img src="images/毛衣.jpg" alt=""/></a>
</li>
<li>
<a href="#">棉服</a>
<a href="#"><img src="images/棉服.jpg" alt=""/></a>
</li>
<li>
<a href="#">女裤</a>
<a href="#"><img src="images/女裤.jpg" alt=""/></a>
</li>
<li>
<a href="#">羽绒服</a>
<a href="#"><img src="images/羽绒服.jpg" alt=""/></a>
</li>
<li class="no_border">
<a href="#">牛仔裤</a>
<a href="#"><img src="images/牛仔裤.jpg" alt=""/></a>
</li>
</ul>
<ul>
<li>
<a href="#">女包</a>
<a href="#"><img src="images/女包.jpg" alt=""/></a>
</li>
<li>
<a href="#">男靴</a>
<a href="#"><img src="images/男靴.jpg" alt=""/></a>
</li>
<li>
<a href="#">登山鞋</a>
<a href="#"><img src="images/登山鞋.jpg" alt=""/></a>
</li>
<li>
<a href="#">皮带</a>
<a href="#"><img src="images/皮带.jpg" alt=""/></a>
</li>
<li>
<a href="#">围巾</a>
<a href="#"><img src="images/围巾.jpg" alt=""/></a>
</li>
<li>
<a href="#">皮衣</a>
<a href="#"><img src="images/皮衣.jpg" alt=""/></a>
</li>
<li>
<a href="#">男毛衣</a>
<a href="#"><img src="images/男毛衣.jpg" alt=""/></a>
</li>
<li>
<a href="#">男棉服</a>
<a href="#"><img src="images/男棉服.jpg" alt=""/></a>
</li>
<li class="no_border">
<a href="#">男包</a>
<a href="#"><img src="images/男包.jpg" alt=""/></a>
</li>
</ul>
</div>
<script src="lib/jquery-3.3.1.js"></script>
<script>
$(function(){
$('li>a:first-child').mouseenter(function(){
$(this).parent('li').css('backgroundImage','url("images/abg.gif")');
$(this).next().children().css('z-index','999');
});
$('li>a:first-child').mouseleave(function(){
$(this).parent('li').css('backgroundImage','url("images/lili.jpg")');
$(this).next().children().css('z-index','1');
});
});
</script>
</body>
</html>
效果图【鼠标经过时改变文字背景图片,中间图片跟着改变为文字对应图片】:
所需图片如下: