鼠标经过高亮显示文字或图片

简单代码实现鼠标经过高亮显示文字或图片，代码很简单，其实就是利用调节透明度来实现的，使用时记得先引入jquery库。

分类：图片代码 > 鼠标滑过难易：入门级

查看演示下载资源下载积分： 20 积分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过高亮显示文字或图片</title>
<style>
html, body, h1, h2, h3, h4, h5, h6, hr, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, img { margin:0; padding:0; }
body { font:14px/1.8 "Microsoft Yahei", "黑体", arial, "Hiragino Sans GB", helvetica, sans-serif; background-color:#000 }
body a, a { text-decoration:none; color:#0094d4; cursor:hand; }
body a:hover, a:hover { text-decoration:none; color:#0094d4; font-style:italic; }
.demo { width:600px; margin:50px auto; }
	.demo .pic { float:left; width:45%; margin-right:5%; }
		.demo .pic p { padding-top:10px; padding-left:20px; }
</style>
<script type="text/javascript" src="http://www.22ba.com/templates/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".pic a").css({ "opacity": 0.6 }).hover(function () {
            $(this).stop().animate({ "opacity": 1 }, 200);
        }, function () {
            $(this).stop().animate({ "opacity": 0.6 }, 100);
        });
    });
</script>
</head>
<body>
	<div class="demo">
        <div class="pic">
           <a href="#" target="_blank" ><img src="pic.jpg" width="100%" alt="" /></a>
           <p><a href="#" target="_blank">更多...</a></p>
        </div>
         <div class="pic">
          <a href="#" target="_blank"><img src="pic.jpg" width="100%" alt=""  /></a>
          <p><a href="#" target="_blank">更多...</a></p>
        </div>
	</div>
</body>
</html>