jQuery鼠标悬停LOGO高亮显示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标悬停LOGO高亮显示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery鼠标悬停LOGO高亮显示</title>
<link href="css/news.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
	$("ul.gallery li").hover(function() { 		
		var thumbOver = $(this).find("img").attr("src");
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide()
		}); 
	} , function() { 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});
});
</script>
</head>
<body>
<div class="other"><a name="kh"></a>
	<div class="boxt">
  	<h3>服务客户</h3>
    <div class="boxtinfo">
    	<ul class="gallery">
	<li>
		<a class="thumb" style="background-image: url(images/leidian.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/leidian.gif" alt="雷电搜索"></span></a>
	</li>
    <li>
		<a class="thumb" style="background-image: url(images/68admin.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/68admin.gif" alt="程序员设计师联盟淘宝店联盟"></span></a>
	</li>
     <li>
		<a class="thumb" style="background-image: url(images/cndns.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/cndns.gif" alt="美橙互联"></span></a>
	</li>
    <li>
    	<a class="thumb" style="background-image: url(images/53dns.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/53dns.gif" alt="互易中国"></span></a>
	</li>
    <li>
    	<a class="thumb" style="background-image: url(images/sdluban.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/sdluban.gif" alt="鲁班装饰"></span></a>
	</li>
    <div class="cer"></div>
    </ul>
    <ul class="gallery">
	<li>
		<a class="thumb" style="background-image: url(images/uhuoo.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/uhuoo.gif" alt="悠活网"></span></a>
	</li>
    <li>
		<a class="thumb" style="background-image: url(images/91.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/91.gif" alt="91手机助手"></span></a>
	</li>
     <li>
		<a class="thumb" style="background-image: url(images/taobao.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/taobao.gif" alt="淘宝网"></span></a>
	</li>
    <li>
    	<a class="thumb" style="background-image: url(http://lycm.net.cn/images/tmall.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/tmall.gif" alt="天猫"></span></a>
	</li>
    <li>
    	<a class="thumb" style="background-image: url(images/lingyi.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 50% 100%; background-repeat: no-repeat no-repeat; "><span style="display: block; opacity: 1; "><img src="images/lingyi.gif" alt="领艺传媒"></span></a>
	</li>
    <div class="cer"></div>
    </ul>
    </div>
    </div>
  </div>
</body>
</html>

CSS代码(news.css):

@charset "utf-8";body,p,ul,li,h3,dl,dt,dd,table,td,th{margin:0;padding:0;}
ul,li{list-style:none;}
a{cursor:pointer;}
.fl{float:left;}
.fr{float:right;}
*body .history-date ul li dl dt{_font-size:12px !important;_font-weight:bold;}
*body .history-date ul li dl dt span{_font-weight:normal !important;}
*body .history-date ul li.green dl dt a{_background:transparent !important;*background:transparent !important;*font-size:12px !important;_font-weight:normal !important;}
.pagemain{width:1000px;margin-left:auto;margin-right:auto;}
html{overflow:auto !important;overflow:hidden;}
body{background-color:#f0f2f4;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;background-attachment:fixed;}
.cer{clear:both;}
.showbox{background-color:#FFF;width:1000px;margin-left:auto;margin-right:auto;font-family:Arial,Helvetica,sans-serif;}
.showboxtt{background-color:#E6E9EC;padding:10px;font-family:"微软雅黑";color:#FFF;}
.boxt h3{color:#FFF;font-family:"微软雅黑";font-size:20px;font-weight:normal;}
.boxtinfo{color:#FFF;font-size:14px;font-family:"微软雅黑";line-height:26px;margin-top:10px;}
.other .boxt h3{color:#333;}
.other .boxtinfo{color:#333;font-size:14px;font-family:"微软雅黑";line-height:26px;margin-top:10px;}
.other{width:1000px;margin-left:auto;margin-right:auto;padding-top:15px;padding-bottom:15px;}
#pagemain .sanjiao{background-image:url(../images/xie.gif);background-repeat:no-repeat;background-position:left bottom;padding-bottom:50px;}
.boxleft{float:left;}
.boxright{float:right;}
#webname,#webtel{background-color:#1E2A38;border:1px solid #182027;height:30px;width:300px;color:#FFF;line-height:30px;font-family:"微软雅黑";}
#webbutton{background-color:#1E2A38;height:30px;width:80px;border:1px solid #182027;color:#FFF;font-family:"微软雅黑";font-size:14px;}
#webinfo{background-color:#1E2A38;border:1px solid #182027;color:#FFF;width:300px;height:60px;font-family:"微软雅黑";}
.boxtinfo a{color:#FFF;}
.msok{height:400px;color:#FFF;text-align:center;font-size:80px;font-family:"微软雅黑";line-height:200px;}
.showboxinfo a{color:#06F;}
.showboxinfo a:hover{color:#F00;}
.pagenum a{display:inline-block;height:30px;line-height:30px;width:40px;text-align:center;background-color:#182029;margin-left:10px;border-radius:5px;color:#FFF;text-decoration:none;}
.pagenum{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:center;}
.pagenum span,.pagenum a:hover{display:inline-block;height:30px;line-height:30px;width:40px;text-align:center;background-color:#00AEFF;margin-left:10px;border-radius:5px;color:#FFF;text-decoration:none;}
ul.gallery li{float:left;margin:0px;padding:0;text-align:center;display:inline;}
ul.gallery{width:1000px;list-style:none;margin:0 auto;padding:0;}
ul.gallery li a.thumb{width:200px;height:70px;cursor:pointer;display:block;}
ul.gallery li span{width:200px;height:70px;overflow:hidden;display:block;}
.xgcaseli{width:240px;margin-left:5px;margin-right:5px;background-color:#FFF;height:154px;float:left;}
.xgcase{background-color:#FFF;padding-top:5px;padding-bottom:5px;}
.xgcaseli a{}
.xgcaseli a:hover{background-color:#00aeff;}

附件:下载该文件资源,减少时间成本(增值服务)