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

时间:2021-10-25 21:29:34
我做了个菜单,构思如下:
菜单体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


<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
width:80px;

}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
width:100%;
height:100%;
        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>

#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">
<!-- 
body
{
margin: 0px;
font-family: 宋体, MS Song;
font-size: 9pt;
color: windowtext;
background: threedface;
}
div.Page_Load
{
margin-left: 40px;
margin-top: 20px;
}
table.Main
{
border: 1px solid #A9A9A9;
 
background-color: White;
}table.Main 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' ;
  }
)}
table.Main tr td
{
text-indent: 1.2em;
}-->
</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


<style>
.menu{
        position:absolute;
        border:1 solid #C0C0C0;
        background:#DCDCDC;
        padding:1 1;
width:80px;

}
.item{
        margin:0 0;
        padding:1 1;
        background:#DCDCDC;
        font-family:tohoma;
        font-size:12;
width:100%;
height:100%;
        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>

#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">
<!-- 
body
{
margin: 0px;
font-family: 宋体, MS Song;
font-size: 9pt;
color: windowtext;
background: threedface;
}
div.Page_Load
{
margin-left: 40px;
margin-top: 20px;
}
table.Main
{
border: 1px solid #A9A9A9;
 
background-color: White;
}table.Main 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' ;
  }
)}
table.Main tr td
{
text-indent: 1.2em;
}-->
</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