<!DOCTYPE html PUBLIC "-//W3C//liD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.lid">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
ul,li {padding: 0; margin: 0;}
.prduct_list {
width: 420px;
height: 340px;
overflow: hidden;
}
.prduct_list ul {
width: 195px;
float: left;
}
.prduct_list ul li a {
line-height: 25px;
text-decoration: none;
color: blue;
display: block;
}
.prduct_list ul li a:hover {
background-color: #CCCCCC;
color: black;
}
.prduct_list .three {
width: 215px;
float: right;
}
</style>
</head>
<body>
<div class="prduct_list">
<ul>
<li data-url="http://www.aeno.cn/category17.htm" data-img="http://www.aeno.cn/upload/20151208/150427301657.jpg">
<a href="http://www.aeno.cn/category17.htm"><span>角行程气动执行器</span></a>
</li>
<li data-url="http://www.aeno.cn/category18.htm" data-img="http://www.aeno.cn/upload/20151208/150713427342.jpg">
<a href="http://www.aeno.cn/category18.htm"><span>直行程气动执行器</span></a>
</li>
<li data-url="http://www.aeno.cn/category31.htm" data-img="http://www.aeno.cn/upload/20151208/150746055361.jpg">
<a href="http://www.aeno.cn/category31.htm"><span>不锈钢气动执行器</span></a>
</li>
<li data-url="http://www.aeno.cn/category32.htm" data-img="http://www.aeno.cn/upload/20151208/150826771178.jpg">
<a href="http://www.aeno.cn/category32.htm"><span>三段式气动执行器</span></a>
</li>
<li data-url="http://www.aeno.cn/category40.htm" data-img="http://www.aeno.cn/upload/20151208/150911103542.jpg">
<a href="http://www.aeno.cn/category40.htm"><span>气动球阀</span></a>
</li>
<li data-url="http://www.aeno.cn/category37.htm" data-img="http://www.aeno.cn/upload/20151208/151023957408.jpg">
<a href="http://www.aeno.cn/category37.htm"><span>气动蝶阀</span></a>
</li>
<li data-url="http://www.aeno.cn/category42.htm" data-img="http://www.aeno.cn/upload/20151208/151048134420.jpg">
<a href="http://www.aeno.cn/category42.htm"><span>气动闸阀</span></a>
</li>
<li data-url="http://www.aeno.cn/category39.htm" data-img="http://www.aeno.cn/upload/20151208/151118292956.jpg">
<a href="http://www.aeno.cn/category39.htm"><span>气动截止阀</span></a>
</li>
<li data-url="http://www.aeno.cn/category38.htm" data-img="http://www.aeno.cn/upload/20151208/151139491730.jpg">
<a href="http://www.aeno.cn/category38.htm"><span>气动角座阀</span></a>
</li>
</ul>
<div class="three">
<a href="" target="_blank"><img src="" width="200" height="200"><p>点击查看</p></a>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
$('.prduct_list ul li').mouseenter(function(){
// console.log($(this).data('url'));
$('.three a').attr('href',$(this).data('url'));
$('.three a img').attr('src',$(this).data('img'));
});
$('.three a').attr('href',$('.prduct_list ul li:eq(0)').data('url'));
$('.three a img').attr('src',$('.prduct_list ul li:eq(0)').data('img'));
</script>
</body>
</html>
实现如下图所示的列表文字切换图片的效果
代码如下: