【100分求助】求教高手：div上的onmouseover的奇怪现象，在线等～分不够再加～

我做了个菜单，构思如下：
菜单体menu，用一个div表示，在此div中加入菜单项item，每个item也分别是一个div，我在item的div中加入onmouseover和onmouseout的响应，当鼠标移到item上，item高亮显示，离开后复原。

可是我做好后发现，在item的区域中，鼠标只有移动到item的上沿和item中的文字时，才响应onmouseover和out事件，而item中的空白部分(被其他内容更长的item拉长的空间)却不响应。可是很显然鼠标此时是在该item的区域中的,这个由该item高亮时的影响区域包括空白部分可以得知。如果在区域内，那为什么不响应空白部分的onmouse事件？

百思不得其解，谁能告诉我这个是为什么？如何解决？

谢谢！！

附代码如下：

<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
        event:expression(
                onmouseover=function(){
                        style.color="#FFFFFF";
                        style.background="#00008B";
                },
                onmouseout=function(){
                        style.color="#000000";
                        style.background="#DCDCDC";
                }
        )
}
</style>
<div class="menu">
<div class="item">Link1Link1</div>
<div class="item">Link2</div>
<div class="item">Link1</div>
<div class="item">Link1</div>
</div>

16 个解决方案

#1

font-size:22; 试试

#2

这样不行啊，只是无效区域变小了点，治标不治本啊！

#3

#4

这个简单加个width就好了，至于数字你再调整下
<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
        width:200;
        event:expression(
                onmouseover=function(){
                        style.color="#FFFFFF";
                        style.background="#00008B";
                },
                onmouseout=function(){
                        style.color="#000000";
                        style.background="#DCDCDC";
                }
        )
}
</style>
<div class="menu">
<div class="item">Link1Link1</div>
<div class="item">Link2</div>
<div class="item">Link1</div>
<div class="item">Link1</div>
</div>

#5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>

</head>
<body>
<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
  event:expression(
  onmouseover = function()
  {
  this.style.color='#FFFFFF';

   this.style.backgroundColor = '#00008B' ;
  },
  onmouseout = function()
  {
  this.style.color='#000000';
   this.style.backgroundColor = '#DCDCDC' ;
  }
)}

</style>
<div class="menu">
<div class="item">Link1Link1</div>
<div class="item">Link2</div>
<div class="item">Link1</div>
<div class="item">Link1</div>
</div>

</body>
</html>

#6

是的，加上width后确实是可以，但这个我也知道的，可是实际使用中如果动态显示内容就不方便了，我想要的是它的宽度也能随着需要而自动增加的，我就是不明白为什么我这样做不响应mouse？难道是js的bug还是我的理解有错呢？

#7

楼上的菜鸟先生你的代码和一样的，空白区没有响应

#8

看错了：）

#9

指定宽度

#10

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>rowIndex</title>
<style media="all" type="text/css">

</style>
</head><body>
<div class="Page_Load"><table class="Main">
<tr>
<td>11111111111111</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
</table></div>
</body>
</html>

#11

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>rowIndex</title>
<style media="all" type="text/css">
<!--
div.menu
{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
}
table.item
{
border: 1px solid #A9A9A9;

background-color: White;
}table.item tr
{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
  event:expression(
  onmouseover = function()
  {
  this.style.color='#FFFFFF';

   this.style.backgroundColor = '#00008B' ;
  },
  onmouseout = function()
  {
  this.style.color='#000000';
   this.style.backgroundColor = '#DCDCDC' ;
  }
)}
</style>
</head><body>
<div class="menu"><table class="item">
<tr>
<td>11111111111111</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
</table></div>
</body>
</html>

#12

上面的是用表格吗？可是，这个是表格啊，不是div，实际使用中，div的功能比表格要多，所以，有没有办法解决div的这个问题？

#13

问题在于
.menu{
position:absolute;
就是这个position导致div的问题出现.菜单没有必要绝对定位吧,去掉就可以了

#14

我就是不明白为什么我这样做不响应mouse？
是的，的确是不响应！请看测试：
<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
        event:expression(
                onmousemove=function(){
view.innerHTML = event.srcElement.id +','+ event.srcElement.innerText;
                        style.color="#FFFFFF";
                        style.background="#00008B";
                },
                onmouseout=function(){
                        style.color="#000000";
                        style.background="#DCDCDC";
                }
        )
}
</style>
<div id='view'>这里</div>
<div id=1 class="menu">
<div id=2 class="item">Link1Link1</div>
<div id=3 class="item">Link2</div>
<div id=4 class="item">Link1</div>
<div id=5 class="item">Link1</div>
</div>

#15

但是，position不为absolute时，我如何让它的宽度自动保持最小状态呢？去掉后就变成一整行了，即改float属性，效果也和absolute时一样，空白区没反应。

#16

.menu{
position:absolute;

都是这句惹的祸,为什么要绝对定位呢?如果不必要去掉就可以解决问题了

关于日期的常见操作
http://community.csdn.net//Expert/TopicView2.asp?id=4360247&datebasetype=now
js FAQ贴
http://community.csdn.net//Expert/TopicView2.asp?id=4356360&datebasetype=now
DHTML手册,js手册,dom手册下载
http://community.csdn.net//Expert/TopicView2.asp?id=4356325&datebasetype=now

#1

font-size:22; 试试

#2

这样不行啊，只是无效区域变小了点，治标不治本啊！

#3

#4

#5

#6

#7

楼上的菜鸟先生你的代码和一样的，空白区没有响应

#8

看错了：）

#9

指定宽度

#10

#11

#12

上面的是用表格吗？可是，这个是表格啊，不是div，实际使用中，div的功能比表格要多，所以，有没有办法解决div的这个问题？

#13

问题在于
.menu{
position:absolute;
就是这个position导致div的问题出现.菜单没有必要绝对定位吧,去掉就可以了

#14

#15

但是，position不为absolute时，我如何让它的宽度自动保持最小状态呢？去掉后就变成一整行了，即改float属性，效果也和absolute时一样，空白区没反应。

秒客网

【100分求助】求教高手：div上的onmouseover的奇怪现象，在线等～分不够再加～

16 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

相关文章

【100分 求助】求教高手：div上的onmouseover的奇怪现象，在线等～分不够再加～

16 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

相关文章

【100分求助】求教高手：div上的onmouseover的奇怪现象，在线等～分不够再加～