n1视觉图片列表样式[jquery代码][A标记里面一个IMG一个EM]

效果表述：

<a href="#"><img><em>title</em></a>

鼠标移上图片边框变个颜色文字变颜色

其实css支持这种效果 a.mycss:hover {} 就ok了，但是吧。。IE6不支持！！现在很多人用IE6，而我自己就是用IE6的。。

没办法。。拿出杀猪刀。。jQuery上了。。

n1视觉图片列表样式[jquery代码][A标记里面一个IMG一个EM]

就是上面这个样子了，鼠标移动到第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://www.VuejsDev.com 用于梳理知识点

秒客网

n1视觉图片列表样式[jquery代码][A标记里面一个IMG一个EM]

相关文章