一、效果

【前端学习笔记 CSS系列十二】鼠标滑过出现边框_css

二、代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
        width: 520px;
        height: 280px;
        margin: 100px auto;
        position: relative;
      }
      /* 鼠标经过之后，在前面插入一个伪元素 */
      div:hover::before {
        content: "";
        width: 100%;
        height: 100%;
        border: 10px solid red;
        display: block;
        /* 注意到伪元素属于行内元素，需要转换 */
        position: absolute; /* 子绝父相 */
        top: 0;
        left: 0;
        box-sizing: border-box; /* 防止加边框会扩大整个盒子 */
      } 
      
    </style>
  </head>
  <body>
    <div>
      <img src="img/2.jpg" />
    </div>
  </body>
</html>