效果表述:
<a href="#"><img><em>title</em></a>
鼠标移上 图片边框变个颜色 文字变颜色
其实css支持这种效果 a.mycss:hover {} 就ok了,但是吧。。IE6不支持!!现在很多人用IE6,而我自己就是用IE6的。。
没办法。。拿出杀猪刀。。jQuery上了。。

就是上面这个样子了,鼠标移动到第2个上面,第2个就变啦。。
开点代码出来。。

Code
<script language="JavaScript" type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".mm").hover(
function () {
//$(".mm img").addClass("kk");
//$(".mm em").addClass("kk1");
$(this).find("img").addClass("kk");
$(this).find("em").addClass("kk1");
},
function () {
//$(".mm img").removeClass("kk");
//$(".mm em").removeClass("kk1");
$(this).find("img").removeClass("kk");
$(this).find("em").removeClass("kk1");
}
);
});
</script>
<style type="text/css">
.kk { border:3px solid #000000!important;}
.kk1 { color:#FF0000!important;}
.mm img {
border:3px solid #CCCCCC;}
.mm em {
font-style: normal;
color:#999999;
display:block;
width:106px;
text-align:center;
text-decoration: none;
cursor:pointer;
font-size:12px;
height:24px;
line-height:24px;
}
.mbox {
width:120px;
float:left;}
</style>
</head>
<body>
<div class="mbox">
<p><a class="mm" href="#"><img border="0" src="71809.jpg" alt="" width="100" height="100" /><em>我爱罗</em></a></p>
</div>
</body>
代码下载:
https://files.cnblogs.com/pengpengsay/n1视觉图片列表样式.rar