今天在用jQuery hover事件的时候，遇到一个很让我很郁闷的事情。绑定好hover事件后，鼠标要出来一个红色边框及一个小箭头。结果鼠标放上去一直闪。找了半天才发现原来是，Css样式里有一个Z-index:-1的原因，删除红的的Z-index:-1,样式就好了。现在把它贴出来。但是因为代码太多，可能不全请大家谅解。如果有想要代码的朋友请是本站留下邮箱。
<!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 hover事件一直闪</title>
<style>
.db-list-box{ clear:both; }
#db-box{ width:990px; margin:0 auto; text-align:left;}
.db-class-bg{background: url(images/bd-12.gif) repeat-x left bottom;}
.db-class{ height:194px; border-left:1px solid #c8c8c8; border-bottom:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #fff;}
.db-hover {height:194px; border:#dc0000 1px solid; background:url(images/bd-10.gif); position:relative;z-index:-1 }
.bd-bg2{ width:7px; height:39px; background:url(images/bd-jiantuo.gif) no-repeat -1px 79px; z-index:2; position: absolute;left:20px; top:10px; }
</style>
<link href=”index.css” rel=”stylesheet” type=”text/css” />
<link href=”new-qudao.css” rel=”stylesheet” type=”text/css” />
<script src=”js/jquery-1.5.min.js”></script>
<script>
/*@desc 鼠标油滑过的时候边框变红
*/
$(function(){
var dbClassName = $(‘.db-class’);
var db_class = ‘db-class’; //原来样式
var hover_class = ‘db-hover’; //红色边框CSS
var class_bg = ‘db-class-bg’; //下边虚线背景
dbClassName.hover(
function () {
$(this).addClass(hover_class).removeClass(class_bg );
$(this).prev().removeClass(class_bg );
},
function () {
$(this).removeClass(hover_class).addClass(class_bg);
$(this).prev().addClass(class_bg);
}
);
})
</script>
<div id=”db-class” class=”db-class db-class-bg”>
<h4 class=”bd-h4Font floatLeft”><a href=”#” ><img src=”images/bd-zi1.gif”/></a><span>服装服饰</span></h4>
<div class=”db-classList floatRight”>
<ul class=”db-classUl floatLeft”>
<!–li横向排列两个LI一排–>
<li class=”floatLeft liHeight”>
<h5 class=”db-font-color floatLeft strong”><a href=”#”>女装</a></h5>
<div class=”db-classList-top floatLeft”> <a href=”#”>上衣</a><a href=”#”>女裤</a><a href=”#”>女裙</a><a href=”#”>内衣</a> </div>
<div class=”db-classList-bottom clear”> <a href=”#” class=”marginLeft”>羽绒服</a>|<a href=”#” class=”colorRed”>棉外套</a>|<a href=”#”>羊毛衫</a>|<a href=”#”>风衣</a>|<a href=”#”>短裤</a> </div>
</li>
<!–横向排列每一个li是一排–>
<li class=”floatLeft liHeight”>
<h5 class=”db-font-color floatLeft strong”><a href=”#”>童装</a></h5>
<div class=”db-classList-top floatLeft”> <a href=”#”>婴儿</a><a href=”#”>童装品牌</a><a href=”#”>鞋类</a><a href=”#”>亲子装</a> </div>
<div class=”db-classList-bottom clear”> <a href=”#” class=”marginLeft”>羽绒服</a>|<a href=”#” class=”colorRed”>连身衣</a>|<a href=”#”>T恤</a>|<a href=”#”>牛仔装</a>|<a href=”#”>短裤</a> </div>
</li>
</ul>
</div>