                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为何鼠标移到标签上不变色

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 鼠标经过事件 </title>

<script type="text/javascript">

function message(){

confirm("请输入密码后，再单击确定!");

}

function click(){

var mychar =document.getElementsByName("title")[0];

mychar.style.color="red";

}

</script>

</head>

<body>

<form>

<label name="title" style="color:balck">密码:</label><input name="password" type="password" onmounseover="click" >

<input name="确定" type="button" value="确定" onmouseover="message()"/>

</form>

</body>

</html>

侦探

2015-11-26

源自：JavaScript进阶篇 6-3

关注问题我要回答

1204

操作

收起

4 回答

一只特立独行的doge
2016-04-20

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
  confirm("请输入密码后，再单击确定!"); 
     }
     function colChange(){
        var mychar =document.getElementsByName("title")[0];
        mychar.style.color="red";
     }
</script>
<style>
  .form1{width:300px;height:300px;margin:0 auto;test-align:center;background-color:#003;}
  .form2{width:200px;height:200px;margin:0 auto;test-align:center;background-color:#666;}
</style>
</head>
<body>
<!--<form class="form1">
<label name="title" style="color:black">密码:</label>
<label name="title" style="color:black">密码:</label>
<input name="password" type="password" onmounseover="colChange()"/>
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>-->
<form class="form2">
<label name="title" style="color:black">密码:</label>
<label name="title" style="color:black">密码:</label>
<input name="password" type="password" onmouseover="colChange()"/>
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>

0 回复有任何疑惑可以回复我~

长颈鹿在附近
2016-02-28

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 鼠标经过事件 </title>

<script type="text/javascript">

    function message(){

  confirm("请输入密码后，再单击确定!"); 

     }

     function putate(){

         var mychar =document.getElementById("title");

         mychar.style.backgroundColor="red";
     }

</script>

</head>

<body>

<form>

<p>密码:</p>
<input id="title" name="password" type="password" onmouseover="putate()"/>
 
<input name="确定" type="button" value="确定" onmouseover="message()"/>


</form>

</body>

</html>

你要的应该是这种效果吧

0 回复有任何疑惑可以回复我~

zeroweb
2015-12-22

<script type="text/javascript">

function message(){

confirm("请输入密码后，再单击确定!");

}

function clicks(){

var mychar = document.getElementsByName("title")[0];

mychar.style.color="red";

}

</script>

<form>

<label name="title" style="color:black">密码:</label>

<label name="title" style="color:black">密码:</label>

<input name="password" type="password" onmouseover="clicks()" >

<input name="确定" type="button" value="确定" onmouseover="message()"/

</form>

经测试没有问题

你的问题

click属性名不可当作函数名来用我改成clicks
你用到的“getElementsByName”不能单个使用
看例子：http://www.w3school.com.cn/jsref/met_doc_getelementsbyname.asp
我复制了一个就可以获取到第一个name值为title的元素了
你这里的问题 onmounseover="click" 调用函数得有括号

0 回复有任何疑惑可以回复我~

#1

一只特立独行的doge

哥们，我就懵了逼了，我照着你写的，一模一样。。。我的就不行，你的就行，能不能帮我看看啊！一脸大写的懵逼吧。form1是我的，form2是你的。代码贴不出来，我贴楼下！你看看

2016-04-20 回复有任何疑惑可以回复我~

李晓健
2015-11-26

style="color:balck" 你这个black 写错了这里和你的程序没有关系

onmounseover="click" 这里click后面没有加括号

input好像不会触发 onmounseover 事件，所以就算程序都写对也没有用

1 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468189 人
解答问题 21891 个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

本课相似问答

2 回答鼠标移动变色问题

1 回答鼠标移到不同行时背景色改变？

3 回答鼠标移动变色的问题

1 回答这样写为什么鼠标移动到一行上颜色不改变？

2 回答为什么鼠标移动颜色没变化？

搜索更多本课相关问答

为何鼠标移到标签上不变色

我要回答关注问题

意见反馈帮助中心 APP下载