发现一个jquery的hover在ie6、7下的问题

qinglinglaoren 2011-12-01 01:56:30



<!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>

<script type="text/javascript" src="Js/jquery1.6.1.js"></script>

<style type="text/css">



.select {

	width:100px;

	border:solid 1px #828790;

	border-top:none;

	position:absolute;

	left:-1px;

	top:21px;

}

.select li {

	height:20px;

	padding-left:5px;

}

</style>

<script type="text/javascript">

$(document).ready(function(){

	$('.select li').hover(function() {

		$('.select li').css('background','none');

		$(this).css('background','#3399ff');

	}).click(function() {		//$('.isselected').css('background','#3399ff');

		$('.select li').removeClass('isselected');

		$(this).addClass('isselected');

		$('.selectedvalue').html($(this).html()).css({

			'background':'#3399ff'

		});

		$('.select').hide();

		//alert($(this).attr('classname'));

	});

})



</script>

</head>



<body>

<div class="selectarea">

    <div class="selected">

        <div class="selectedvalue"></div>

        <div class="selectedmore"></div>

    </div>

    <ul class="select">

        <li class="isselected">桥梁</li>

        <li>路基</li>

        <li>路面</li>

        <li></li>

    </ul>

</div>

</body>

</html>

会发现在ie6、7下，只有当鼠标移到字上面才会有效果，移动到li的空白处无法识别，并且，当li的内容为空时，hover将无法对此li有任何作用。
经过几经查找，发现当把position:absolute;去掉后，就一切ok了，但是我需要用到绝对定位的。
又经过朋友的帮助，如果给li加上border也勉强能有些效果，但是对于hover的反应却不是很灵敏。

希望哪位高手帮忙解决问题，谢谢！

...全文

513 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

qinglinglaoren 2011-12-05

打赏
举报

[Quote=引用 4 楼 yusongkun 的回复:]

也就是你把background设置为了none。

当li一直都有背景色的话，鼠标滑过就有效果了。
[/Quote]

多谢，多谢，确实是这个问题，。嘿嘿……以后还望多多指教……分全给你了……

yusongkun 2011-12-02

打赏
举报

万恶的bug呀，万恶的ie呀，兄弟结贴吧。

yusongkun 2011-12-02

打赏
举报

也就是你把background设置为了none。

当li一直都有背景色的话，鼠标滑过就有效果了。

yusongkun 2011-12-02

打赏
举报

楼上的方法为测试了，也是不行的。
下面的方法可以完美解决



.select li {

    height:20px;

    padding-left:5px;

    background:#fff;

}

$(document).ready(function(){

    $('.select li').hover(function() {

        $('.select li').css('background','#fff');

        $(this).css('background','#3399ff');

    }).click(function() {        

        $('.select li').removeClass('isselected');

        $(this).addClass('isselected');

        $('.selectedvalue').html($(this).html()).css({

            'background':'#3399ff'

        });

        $('.select').hide();

        

    });

})