为什么不触发onmouseover

wzp144650 2010-03-25 01:51:43





<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    

   <style>

   .myColor {

    background-color:#3366CC;

    color:White;

       }

   </style>

    <script src="jquery-1.3.2-vsdoc2.js"></script>

 

    <script type="text/javascript">

    function changeColor(obj)

    {

       $(obj).toggleClass("myColor");

    }

    </script>

   

   

</head>

<body>

   <form id="form1" >

    <div width='100'  onmouseover='alert()'>ddd</div>

   <div id="myDiv"   >  <input type="text" id="txt_input" /></div>

 

  

    </form>

    <script language="javascript" type="text/javascript">

    $(function(){

        var width=$("#txt_input").outerWidth();

        $("#myDiv").append("<div id='myDiv1' style='border-style: solid; border-width:1px;width:"+width+"' ></div>");

        $("#myDiv1").append("<div onmouseover='changeColor(this)'   onmouseleave='changeColor(this)'>1</div>");

        $("#myDiv1").append("<div  onmouseover='changeColor(this)'  onmouseleave='changeColor(this)'>2</div>");

        

    })

    

   

    </script>

</body>

</html>

添加进来的那个两个DIV，总是必须要把鼠标放到其中的文字上才触发onmouseover、onmouseenter。

而上面那个ddd的div却不是这样，这是为什么。

...全文

795 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

阿非 2010-03-25

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    

   <style>

   .myColor {

    background-color:#3366CC;

    color:White;

       }

   </style>

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

 

    <script type="text/javascript">

    function changeColor(obj)

    {

       $(obj).toggleClass("myColor");

    }

    </script>

   

   

</head>

<body>

   <form id="form1" >

    <div width='100'  onmouseover='alert()'>ddd</div>

   <div id="myDiv"   >  <input type="text" id="txt_input" /></div>

 

  

    </form>

    <script language="javascript" type="text/javascript">

    $(function(){

        var width=$("#txt_input").outerWidth();

        $("#myDiv").append("<div id='myDiv1' style='border-style: solid; border-width:1px;width:"+width+"' ></div>");

        $("#myDiv1").append("<div>1</div>");

        $("#myDiv1").append("<div>2</div>");

        //$("#myDiv1 div").hover(function(){ $(this).toggleClass("myColor");},function(){$(this).toggleClass("myColor");});



		$("#myDiv1 div").bind("mouseover",function(){ $(this).toggleClass("myColor");}).bind("mouseout",function(){ $(this).toggleClass("myColor");})



    })

    

   

    </script>

</body>

</html>

wzp144650 2010-03-25

打赏
举报

[Quote=引用 19 楼 sandy945 的回复:]

没解决IE6下内嵌div不指定宽度时的问题
[/Quote]
IE6下设宽度貌似也不可以。

再问你个，用bind方式如何添加onmouseover事件？

wzp144650 2010-03-25

打赏
举报

[Quote=引用 17 楼 pengyi_205 的回复:]

我昨天也碰到这个问题，，初始化的时候把myDiv 设一个背景色就可以了
[/Quote]
确信？

我上午就试过加颜色不可以

我刚才又试了一下，还是不可以

阿非 2010-03-25

打赏
举报

没解决IE6下内嵌div不指定宽度时的问题

阿非 2010-03-25

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    

   <style>

   .myColor {

    background-color:#3366CC;

    color:White;

       }

   </style>

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

 

    <script type="text/javascript">

    function changeColor(obj)

    {

       $(obj).toggleClass("myColor");

    }

    </script>

   

   

</head>

<body>

   <form id="form1" >

    <div width='100'  onmouseover='alert()'>ddd</div>

   <div id="myDiv"   >  <input type="text" id="txt_input" /></div>

 

  

    </form>

    <script language="javascript" type="text/javascript">

    $(function(){

        var width=$("#txt_input").outerWidth();

        $("#myDiv").append("<div id='myDiv1' style='border-style: solid; border-width:1px;width:"+width+"' ></div>");

        $("#myDiv1").append("<div>1</div>");

        $("#myDiv1").append("<div>2</div>");

        $("#myDiv1 div").hover(function(){ $(this).toggleClass("myColor");},function(){$(this).toggleClass("myColor");});

    })       

    </script>

</body>

</html>

但没解决IE6下不指定宽度时的问题

夺命胖子 2010-03-25

打赏
举报

我昨天也碰到这个问题，，初始化的时候把myDiv 设一个背景色就可以了

ning823 2010-03-25

打赏
举报

外面“1 2”两个DIV 没设置宽度，高度。所以鼠标移上去没反应。

wzp144650 2010-03-25

打赏
举报

[Quote=引用 12 楼 sandy945 的回复:]

我的是IE8，刚才在IE6 下试了一下，确实是 IE6 的原因和 jQ 无关

但你可以使用 jQ 来为 div 添加相应事件从而避免浏览器问题
[/Quote]
你说的可是这种方式？





 $("#div1").mouseover(function(){alert()})

bind的方式我不知道onmouseover事件应该用什么代替

wzp144650 2010-03-25

打赏
举报

[Quote=引用 13 楼 foren_whb 的回复:]

引用 11 楼 wzp144650 的回复:
你的说法我之前就试过，之前我这两个DIV上都设了WIDTH，发上来之前删掉了

你说DIV的范围就是1吗？我怎么感觉不是呢，这样想，你放到1上变色了吧？变成蓝色的范围是多少DIV就应该多大吧？你看看是1的范围吗

那我也不能理解拉。。。
[/Quote]

我的推理对么？我的确不是很理解HTML，我是这么推断的

丰云 2010-03-25

打赏
举报

[Quote=引用 11 楼 wzp144650 的回复:]
你的说法我之前就试过，之前我这两个DIV上都设了WIDTH，发上来之前删掉了

你说DIV的范围就是1吗？我怎么感觉不是呢，这样想，你放到1上变色了吧？变成蓝色的范围是多少DIV就应该多大吧？你看看是1的范围吗
[/Quote]
那我也不能理解拉。。。

阿非 2010-03-25

打赏
举报

我的是IE8，刚才在IE6 下试了一下，确实是 IE6 的原因和 jQ 无关

但你可以使用 jQ 来为 div 添加相应事件从而避免浏览器问题

wzp144650 2010-03-25

打赏
举报

你的说法我之前就试过，之前我这两个DIV上都设了WIDTH，发上来之前删掉了

你说DIV的范围就是1吗？我怎么感觉不是呢，这样想，你放到1上变色了吧？变成蓝色的范围是多少DIV就应该多大吧？你看看是1的范围吗

wzp144650 2010-03-25

打赏
举报

[Quote=引用 7 楼 sandy945 的回复:]

你换下最新版试下
[/Quote]
同样。。我用的就是你那个。

好像是浏览器的问题，我用IE6不可以用Chrome可以

丰云 2010-03-25

打赏
举报

onmouseover、onmouseenter所在的控件覆盖范围内有效，
<div onmouseover='changeColor(this)' onmouseleave='changeColor(this)'>1</div>
这个div的范围就是1，当然要滑到1上面才有效果呀。。。
<div width='100' onmouseover='alert()'>ddd</div>
这个范围是100个像素，大于ddd占用的，所以，只要在这个div内，没到 ddd上，也有效果

wzp144650 2010-03-25

打赏
举报

[Quote=引用 4 楼 foren_whb 的回复:]

<div width='100' .......

LZ对onmouseover、onmouseenter的作用方法不了解呀。。。
[/Quote]

- -！是么，那你认为我是哪理解错了？

阿非 2010-03-25

打赏
举报

你换下最新版试下

wzp144650 2010-03-25

打赏
举报

[Quote=引用 5 楼 sandy945 的回复:]

不是不明白，是我这里的效果是OK 的

用的 jQ 是

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
[/Quote]

刚才在JS区发，也有人说正常。。。。。

难道是jquery库版本的问题。。

阿非 2010-03-25