设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 有关鼠标放到按钮上实现高亮的问题
返回列表 发新帖
查看: 2708|回复: 3

[已解决]有关鼠标放到按钮上实现高亮的问题

[复制链接]
Junpei
发表于 2020-4-3 15:50:24 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
我想按照书本上的方式利用Event对象的方式实现两个按钮鼠标放上去时高亮,移开时还原的效果。但是我发现鼠标放到按钮上时,按钮上登录两个字的背景色却并没有高亮显示，鼠标放到登录上面登录两个字的颜色高亮了其他地方却没有高亮，是有什么地方不对吗。之前用button标签的属性实现的时候是没有这问题的
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="utf-8">

  6.                 <link rel="icon" href="goo.jpg">
  7.                 <title>在线多人聊天室</title>

  9.                 <style>  
  10.                         body{
  11.                                 background-image: url("hyper_beast1.jpg");
  12.                                 background-size: cover;
  13.                                 background-position: 0px 0px;
  14.                                 background-repeat: no-repeat;
  15.                         }        
  16.                         h2{
  17.                                 color: white;
  18.                         }
  19.                         .login{
  20.                                 height: 400px;
  21.                                 width: 400px;
  22.                                 background-color: rgba(255, 255, 255, 0.75);
  23.                                 border-width: 2px;
  24.                                 border-color: black;
  25.                                 border-style: solid;
  26.                                 border-radius: 15px;
  27.                         }

  29.                         #log1{
  30.                                 background: green;
  31.                                 height: 40px;
  32.                                 width: 300px;
  33.                                 border-radius: 5px;
  34.                                 font-size: 20px;
  35.                         }

  37.                         #register1{
  38.                                 background: green;
  39.                                 height: 40px;
  40.                                 width: 300px;
  41.                                 border-radius: 5px;
  42.                                 font-size: 20px;
  43.                         }

  45.                 </style>

  47.         </head>

  49.         <body>
  50.                 <h2><center>在线多人聊天登录:</center></h2>
  51.                 <br><br>
  52.                 <center>
  53.                         <div class="login">
  54.                                 <form class="login1" method="POST"></form>
  55.                                         <br><br><br><br>
  56.                                         <label>账户:</label> <input id="account" autofocus> <br><br>
  57.                                         <label>密码:</label> <input type="password"> <br><br><br><br><br><br>

  59.                                         <button id="log1" type="submit" value=""><b>登录</b></button>
  60.                                         <br><br>
  61.                                         <button id="register1" type="button"><b>注册</b></button>
  62.                                 </form>
  63.                         </div>
  64.                 </center>
  65.                
  66.                 <script>
  67.             document.getElementById("register1").onclick = function()
  68.                         {

  70.                 document.location.assign("February.html");
  71.             }

  73.                         var elems=document.getElementsByTagName('button');
  74.                         for (var i=0;i<elems.length;i++)
  75.                         {
  76.                                 elems[i].onmouseover=HandleOnButton;
  77.                                 elems[i].onmouseout=HandleOutButton;
  78.                         }


  81.                         function HandleOnButton(e)
  82.                         {
  83.                                 e.target.style.background='#28FF28';
  84.                         }

  86.                         function HandleOutButton(e)
  87.                         {
  88.                                 e.target.style.background='green';
  89.                         }

  91.         </script>


  94.         </body>

  96. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
dlnb526
2020-4-3 19:32:17
Junpei 发表于 2020-4-3 19:22
你好,你的意思是target不仅会选中button也会选中它的子标签是吗,我试了一下去掉b标签确实可以

onmouseover 对<button>和<b>这两个盒子分别起作用，你用console.log(elems[i]),DOM层次中<b>依旧是一个子节点，应该是js 的事件冒泡起作用，所以子元素onmouseover父元素 onmouseout
q1.png
q2.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

dlnb526
发表于 2020-4-3 18:20:00 | 显示全部楼层
有了buttton 里面的<b>去掉不就可以啦~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="utf-8">

  6.                 <link rel="icon" href="goo.jpg">
  7.                 <title>在线多人聊天室</title>

  9.                 <style>  
  10.                         body{
  11.                                 background-image: url("hyper_beast1.jpg");
  12.                                 background-size: cover;
  13.                                 background-position: 0px 0px;
  14.                                 background-repeat: no-repeat;
  15.                         }        
  16.                         h2{
  17.                                 color: white;
  18.                         }
  19.                         .login{
  20.                                 height: 400px;
  21.                                 width: 400px;
  22.                                 background-color: rgba(255, 255, 255, 0.75);
  23.                                 border-width: 2px;
  24.                                 border-color: black;
  25.                                 border-style: solid;
  26.                                 border-radius: 15px;
  27.                         }

  29.                         #log1{
  30.                                 background: green;
  31.                                 height: 40px;
  32.                                 width: 300px;
  33.                                 border-radius: 5px;
  34.                                 font-size: 20px;
  35.                         }

  37.                         #register1{
  38.                                 background: green;
  39.                                 height: 40px;
  40.                                 width: 300px;
  41.                                 border-radius: 5px;
  42.                                 font-size: 20px;
  43.                         }

  45.                 </style>

  47.         </head>

  49.         <body>
  50.                 <h2><center>在线多人聊天登录:</center></h2>
  51.                 <br><br>
  52.                 <center>
  53.                         <div class="login">
  54.                                 <form class="login1" method="POST"></form>
  55.                                         <br><br><br><br>
  56.                                         <label>账户:</label> <input id="account" autofocus> <br><br>
  57.                                         <label>密码:</label> <input type="password"> <br><br><br><br><br><br>

  59.                                         <button id="log1" type="submit" value="">登录</button>
  60.                                         <br><br>
  61.                                         <button id="register1" type="button">注册</button>
  62.                                 </form>
  63.                         </div>
  64.                 </center>
  65.                
  66.                 <script>
  67.             document.getElementById("register1").onclick = function()
  68.                         {

  70.                 document.location.assign("February.html");
  71.             }

  73.                         var elems=document.getElementsByTagName('button');
  74.                         for (var i=0;i<elems.length;i++)
  75.                         {
  76.                                 elems[i].onmouseover=HandleOnButton;
  77.                                 elems[i].onmouseout=HandleOutButton;
  78.                         }


  81.                         function HandleOnButton(e)
  82.                         {
  83.                                 e.target.style.background='#28FF28';
  84.                         }

  86.                         function HandleOutButton(e)
  87.                         {
  88.                                 e.target.style.background='green';
  89.                         }

  91.         </script>


  94.         </body>

  96. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Junpei
 楼主| 发表于 2020-4-3 19:22:39 | 显示全部楼层
dlnb526 发表于 2020-4-3 18:20
有了buttton 里面的去掉不就可以啦~

你好,你的意思是target不仅会选中button也会选中它的子标签是吗,我试了一下去掉b标签确实可以
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

dlnb526
发表于 2020-4-3 19:32:17 | 显示全部楼层    本楼为最佳答案   
Junpei 发表于 2020-4-3 19:22
你好,你的意思是target不仅会选中button也会选中它的子标签是吗,我试了一下去掉b标签确实可以

onmouseover 对<button>和<b>这两个盒子分别起作用，你用console.log(elems[i]),DOM层次中<b>依旧是一个子节点，应该是js 的事件冒泡起作用，所以子元素onmouseover父元素 onmouseout
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 14:04

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表