css鼠标放上后元素浮动

基础概念

CSS中的:hover伪类用于选择鼠标指针浮动在元素上方时的状态。通过:hover伪类，可以改变元素的样式，例如颜色、大小、位置等。

类型

颜色变化：改变背景色、文字颜色等。
尺寸变化：放大或缩小元素。
位置变化：移动元素的位置。
透明度变化：改变元素的透明度。
动画效果：添加过渡或动画效果。

应用场景

按钮：鼠标悬停在按钮上时，改变按钮的颜色或大小，提示用户该按钮可点击。
链接：鼠标悬停在链接上时，改变链接的颜色或下划线，提示用户这是一个可点击的链接。
图片：鼠标悬停在图片上时，显示图片的放大效果或相关信息。
菜单：鼠标悬停在菜单项上时，展开子菜单或改变菜单项的背景色。

示例代码

以下是一个简单的示例，展示如何使用CSS实现鼠标悬停时元素浮动的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Effect</title>
    <style>
        .hover-element {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: transform 0.3s ease;
        }

        .hover-element:hover {
            transform: translateY(-20px);
        }
    </style>
</head>
<body>
    <div class="hover-element"></div>
</body>
</html>