使用CSS在图像悬停时显示蓝色阴影

Display a blue shadow on image hover with CSS

要在图像悬停时显示阴影,请使用CSS box-shadow属性

现场演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
   <style>
    img {
      border: 2px solid orange;
      border-radius: 3px;
      padding: 7px;
    }
    img:hover {
      box-shadow: 0 0 2px 2px blue;
    }
   </style>
 </head>
 <body>
   <img src ="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
 </body>
</html>