火狐下div浮动层隐藏问题
<styletype="text/css">/*<![CDATA[*/img1{border:1pxsolid#B8D4E9;}/*]]>*/</style><style...
<style type="text/css">
/*<![CDATA[*/
img1{border:1px solid #B8D4E9;}
/*]]>*/
</style>
<style type="text/css">
<!--
a {
position:static;
}
a div {
display: none;/*初始化信息面板不显示*/
}
a:hover {overflow:hidden;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:1px;
display:block;
left:310px;
top: 268px;
border: 1px solid rgb(91,185,233);
z-index:999;
}
<div style="clear:both">
。。。。。。。
<td align="center" valign="middle"><a href="#">
<img src="img/01.jpg"/>
<div ><img src="img/02.jpg"/>alt="" /></div></td>
ie6下02.jpg是鼠标放到01.jpg上才浮动显示的，火狐下却是始终上下并排显示。
请哪位大侠帮忙改下，鼠标放到01.jpg小图上显示02.jpg大图，谢谢了。 展开
/*<![CDATA[*/
img1{border:1px solid #B8D4E9;}
/*]]>*/
</style>
<style type="text/css">
<!--
a {
position:static;
}
a div {
display: none;/*初始化信息面板不显示*/
}
a:hover {overflow:hidden;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:1px;
display:block;
left:310px;
top: 268px;
border: 1px solid rgb(91,185,233);
z-index:999;
}
<div style="clear:both">
。。。。。。。
<td align="center" valign="middle"><a href="#">
<img src="img/01.jpg"/>
<div ><img src="img/02.jpg"/>alt="" /></div></td>
ie6下02.jpg是鼠标放到01.jpg上才浮动显示的，火狐下却是始终上下并排显示。
请哪位大侠帮忙改下，鼠标放到01.jpg小图上显示02.jpg大图，谢谢了。 展开
4个回答
展开全部
<!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>
#img2{display:none}
</style>
</head>
<body>
<div id="img1">
<img src="img/01.jpg" onmouseover="Show(1)" onmouseout="Show(2)"/>
</div>
<div id="img2">
<img src="img/02.jpg"/>
</div>
<script>
function Show(num){
var imgid = document.getElementById("img2");
if(num == 1){imgid.style.display = "block"}
if(num == 2){imgid.style.display = "none"}
}
</script>
</body>
</html>
你的代棚饥码错误太多了
1.第二个<style>标签没有结尾
2.下面的图片有TD标签却没有TABLE和TR?
你这表格标签也不完全
3.还有这个,
你在样式控制的时候不要用全局的样式来写
现在内容少当然没问题,多了就会相互干扰
例如最上面的样式
img1{border:1px solid #B8D4E9;}
请写成#img1{border:1px solid #B8D4E9;}
上面是错误的,没有这样的标签,除非你申明了,要不就是错误的,还有下面的
a div{}这个也不很规范 不要全局定死了
要不后面所有A标签里面的DIV标签都会受其中的样式内容约束
上面我是按你下行尘面说的效果我自己写了个,没定位,你自己用样式定位链带返,我就不定位了
我只做出你的效果
还有什么不明白可以摆渡HI和我说
满意要给分哦
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#img2{display:none}
</style>
</head>
<body>
<div id="img1">
<img src="img/01.jpg" onmouseover="Show(1)" onmouseout="Show(2)"/>
</div>
<div id="img2">
<img src="img/02.jpg"/>
</div>
<script>
function Show(num){
var imgid = document.getElementById("img2");
if(num == 1){imgid.style.display = "block"}
if(num == 2){imgid.style.display = "none"}
}
</script>
</body>
</html>
你的代棚饥码错误太多了
1.第二个<style>标签没有结尾
2.下面的图片有TD标签却没有TABLE和TR?
你这表格标签也不完全
3.还有这个,
你在样式控制的时候不要用全局的样式来写
现在内容少当然没问题,多了就会相互干扰
例如最上面的样式
img1{border:1px solid #B8D4E9;}
请写成#img1{border:1px solid #B8D4E9;}
上面是错误的,没有这样的标签,除非你申明了,要不就是错误的,还有下面的
a div{}这个也不很规范 不要全局定死了
要不后面所有A标签里面的DIV标签都会受其中的样式内容约束
上面我是按你下行尘面说的效果我自己写了个,没定位,你自己用样式定位链带返,我就不定位了
我只做出你的效果
还有什么不明白可以摆渡HI和我说
满意要给分哦
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
您好！很高兴为您答疑！
1.第二个<style>标签没有结尾。
2.下面的图片有TD标签却没有TABLE和TR?
3.你在样式控制的昌宏时候不孝或要用全局的样式来写，现在内容少当然没问题,多了就会相互干扰。
您巧迅伍可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
1.第二个<style>标签没有结尾。
2.下面的图片有TD标签却没有TABLE和TR?
3.你在样式控制的昌宏时候不孝或要用全局的样式来写，现在内容少当然没问题,多了就会相互干扰。
您巧迅伍可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你想要塌森一个什么效果你说清楚
我重新给你写
<!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 language="javascript">
function div1 () {
document.getElementById('div2').style.display='block'
}
function div2 () {
document.getElementById('div2').style.display='none'
}
</script>
<style>
#div1{ position:relative;width:100px; height:100px; background:#900;}/*图片层*/
#div2{ position:absolute;width:50px; height:50px; background:#ccc; border:2px #00F solid; display:none;}/*浮出租基层的样式*/
#div2{ left:102px; top:0px;}/*浮出层的位置*/
</style>
</head>
<body>
<div id="div1" onmouseover="div1()" onmouseout="div2()">
这里面可以放你需要的图片
<div id="div2">浮出层</div>
</div>
</body>
</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>无标题文档</title>
<script language="javascript">
function div1 () {
document.getElementById('div2').style.display='block'
}
function div2 () {
document.getElementById('div2').style.display='none'
}
</script>
<style>
#div1{ position:relative;width:100px; height:100px; background:#900;}/*图片层*/
#div2{ position:absolute;width:50px; height:50px; background:#ccc; border:2px #00F solid; display:none;}/*浮出租基层的样式*/
#div2{ left:102px; top:0px;}/*浮出层的位置*/
</style>
</head>
<body>
<div id="div1" onmouseover="div1()" onmouseout="div2()">
这里面可以放你需要的图片
<div id="div2">浮出层</div>
</div>
</body>
</html>团型亩
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
