div鼠标进入显示高亮外边

div鼠标进入显示高亮外边

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 150px;
      background-color: green;
      float: left;
      margin-left: 10px;
      border: 2px solid green;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  //获取所有的
  //div
  var divObjs=document.getElementsByTagName("div");
  for(var i=0;i<dvObjs.length;i++){
    //为每个div添加鼠标进入的事件
    divObjs[i].onmouseover=function () {
      this.style.border="2px solid red";
    };
    //为每个div添加鼠标离开的事件
    divObjs[i].onmouseout=function () {
      this.style.border="";
    };
  }
</script>
</body>
</html>
发布了116 篇原创文章 · 获赞 4 · 访问量 1771

猜你喜欢

转载自blog.csdn.net/qq_43618136/article/details/104252316