IE7下absolute定位的hover伪类元素的一个小问题

最新推荐文章于 2021-06-15 14:14:23 发布

iteye_12858

最新推荐文章于 2021-06-15 14:14:23 发布

阅读量347

点赞数

分类专栏： html 文章标签： html css

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

想仿照新浪微博做一个上面的导航条(toolbar),就是鼠标移上去,就能显示面板那种.
就像这样
[img]http://dl.iteye.com/upload/picture/pic/121441/ede285e2-10b8-34c9-b7e6-4b557a95740b.jpg[/img]

不想用js脚本搞来搞去,打算直接用hover伪类来着.
每个弹出的面板是absolute定位的,结果发现IE7下鼠标一从面板的文字(即"我的首页弹出层"这几个字)上面移开,面板马上消失的无影无踪.后来给面板加上了白色的背景色才正常了起来

background-color: white;

和这位老兄遇到的问题很有相似之处啊
[url]http://hi.baidu.com/1b1b1/item/f10d301919e07709e75c366b[/url]

代码放这里备忘,反正是各种浏览器不兼容.....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部固定菜单</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.nav-wrapper-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: 25px;
	background-color: #3FA7CB;
}

.nav-wrapper-fixed .item {
	width: 100px;
	height: 25px;
	float: left;
}

.nav-wrapper-fixed .item:hover {
	background-color: white;
}

.nav-wrapper-fixed .item:hover .panel {
	display: block;
	background-color: white;
}

.nav-wrapper-fixed .panel {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 25px;
	left: 0px;
	display: none;
	border-style: none solid solid solid;
	border-color: green;
	border-width: 1px;
}

.nav-wrapper-fixed .nav {
	width: 500px;
	position: relative;
	margin: 0 auto 0 auto;
}

.main {
	margin-top: 50px;
}
</style>
</head>
<body style="height: 2000px;">
	<div class="nav-wrapper-fixed" id="navFixed">
		<div class="nav" id="nav">
			<div class="item">
				<span>个人中心</span>
				<div class="panel">个人中心弹出层</div>
			</div>
			<div class="item">
				<span>我的首页</span>
				<div class="panel">我的首页弹出层</div>
			</div>
			<div class="item">
				<span>应用</span>
				<div class="panel">应用弹出层</div>
			</div>
		</div>
	</div>
	<div class="main">
		<ul>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
		</ul>
	</div>
</body>
</html>

iteye_12858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE7下absolute定位的hover伪类元素的一个小问题

想仿照新浪微博做一个上面的导航条(toolbar),就是鼠标移上去,就能显示面板那种.就像这样[img]http://dl.iteye.com/upload/picture/pic/121441/ede285e2-10b8-34c9-b7e6-4b557a95740b.jpg[/img]不想用js脚本搞来搞去,打算直接用hover伪类来着.每个弹出的面板是absolute定位的...
复制链接

扫一扫