为什么,鼠标没有离开文本框,文字颜色就变绿了?

为什么,鼠标没有离开文本框,文字颜色就变绿了?

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>mouse</title>

    <style type="text/css">

    #div{overflow:auto;width:200px;height:200px;border:2px solid gray;margin-bottom:20px;}

    #content{width:200px;height:100px;border:2px solid gray;}

    </style>

</head>

<body>

<div id="div">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod,tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo,consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse,cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non,proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div id="content"></div>

<script type="text/javascript">

         //补充代码

         var a=document.getElementById("div"),

             b=document.getElementById("content");

        //  var c=document.getElementsByTagName("p")[0];

         a.onscroll=function (){

             this.style.color="red";

             b.innerHTML="内容滚动了";

         }

         a.onmouseout=function (){

             this.style.color="green";

         }

         

</script> 

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,同学说的是在移入的时候字体颜色就变为绿色的是吗?

这是因为使用了onmouseout事件,事件会冒泡,鼠标移入div,再移入p标签的时候,会触发一个div移出的事件,所以字体颜色会变色。

可以改为onmouseleave事件,参考:

http://img1.sycdn.imooc.com//climg/5c8dc6910001bc2c04130145.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师