87,904
社区成员
发帖
与我相关
我的任务
分享css层次问题，很奇怪哟。
<HTML>
<HEAD>
<TITLE>Mouse Event</TITLE>
<style type="text/css">
<!--
.csssquare
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:crosshair; <!--这里是十字形的鼠标-->
border:1 red solid;
z-index:0; <!--设置层次关系，但不管用-->
background-color:none;<!--当这个不为none时，是正确的-->
}
.cssgirl
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:hand; <!--这里是手状的鼠标-->
z-index:-1; <!--层次-->
}
-->
</style>
</HEAD>
<BODY>
<img id="girl" name="girl" src="girl.bmp" class="cssgirl">
<div id="square" name="square" class="csssquare"></div>
</BODY>
</HTML>
问题：在explorer中，按道理，当我把鼠标移动到上面定义的区域时鼠标应该为十字形的，就是鼠标应该响应的是div。但实际上不是的，鼠标响应的是img。当给div的背景设置了一种颜色时，鼠标响应div。但是图片看不见了。
请告诉我原因？
<HEAD>
<TITLE>Mouse Event</TITLE>
<style type="text/css">
<!--
.csssquare
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:crosshair; <!--这里是十字形的鼠标-->
border:1 red solid;
z-index:0; <!--设置层次关系，但不管用-->
background-color:none;<!--当这个不为none时，是正确的-->
}
.cssgirl
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:hand; <!--这里是手状的鼠标-->
z-index:-1; <!--层次-->
}
-->
</style>
</HEAD>
<BODY>
<img id="girl" name="girl" src="girl.bmp" class="cssgirl">
<div id="square" name="square" class="csssquare"></div>
</BODY>
</HTML>
问题：在explorer中，按道理，当我把鼠标移动到上面定义的区域时鼠标应该为十字形的，就是鼠标应该响应的是div。但实际上不是的，鼠标响应的是img。当给div的背景设置了一种颜色时，鼠标响应div。但是图片看不见了。
请告诉我原因？
...全文
请发表友善的回复…
发表回复
xuzuning 2003-08-20
- 打赏
- 举报
不要弄的那么复杂，你把图片作为div的背景不就行了
liuzxit 2003-08-20
- 打赏
- 举报
奇怪﹐既然你img和div都重疊了﹐那干嗎不直接把img的cursor也改成crosshair呢
aviatorbai 2003-08-20
- 打赏
- 举报
cloudchen(陈系上)兄弟，好像不是这样的吧。我在div里加入文字，还是一样的！再者我的div上面不允许其它任何东西的。我要在上面模拟画图的。
cloudchen 2003-08-19
- 打赏
- 举报
<HTML>
<HEAD>
<TITLE>Mouse Event</TITLE>
<style type="text/css">
.csssquare
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:crosshair; /*这里是十字形的鼠标*/
border:1 red solid;
z-index:0; /*设置层次关系，但不管用*/
background-color:none;/*当这个不为none时，是正确的*/
}
.cssgirl
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:hand; /*这里是手状的鼠标*/
z-index:-1; /*层次*/
}
</style>
</HEAD>
<BODY>
<img id="girl" name="girl" src="girl.bmp" class="cssgirl">
<div id="square" name="square" class="csssquare">因为你的div里面没有内容！容器上没有内容在页面上可见，所以会出现你所说的问题</div>
</BODY>
</HTML>
<HEAD>
<TITLE>Mouse Event</TITLE>
<style type="text/css">
.csssquare
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:crosshair; /*这里是十字形的鼠标*/
border:1 red solid;
z-index:0; /*设置层次关系，但不管用*/
background-color:none;/*当这个不为none时，是正确的*/
}
.cssgirl
{
position:absolute;
left:100;
top:100;
width:200;
height:200;
cursor:hand; /*这里是手状的鼠标*/
z-index:-1; /*层次*/
}
</style>
</HEAD>
<BODY>
<img id="girl" name="girl" src="girl.bmp" class="cssgirl">
<div id="square" name="square" class="csssquare">因为你的div里面没有内容！容器上没有内容在页面上可见，所以会出现你所说的问题</div>
</BODY>
</HTML>
