CSS 鼠标悬停悬浮

最新推荐文章于 2025-01-08 07:00:00 发布

浅影歌年

最新推荐文章于 2025-01-08 07:00:00 发布

阅读量565

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44980864/article/details/121029440

版权

这段HTML和CSS代码展示了如何创建一个简单的悬停效果。当鼠标悬停在白色的方块上时，方块会向下移动并添加阴影。这个例子涉及到CSS的过渡效果、盒阴影以及定位属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
  }
  div {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .test {
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    float: left;
    list-style: none;
    text-align: center;
    margin: 13px 12px 0 0;
    position: relative;
    transition: all .2s linear;
    top: 0;
  }
  .test:hover {
    top: -5px;
    box-shadow: 5px 5px 5px 5px #e4e4e4;
  }
</style>
<body>
<div>
  <div class="test">
    鼠标悬停悬浮
  </div>
</div>
</body>
</html>