CSS实现卡片在鼠标悬停时突出效果

在CSS中，实现卡片在鼠标悬停时突出，通常使用:hover伪类选择器。

:hover伪类选择器用于指定当鼠标指针悬停在某个元素上时，该元素的状态变化。通过:hover选择器，你可以定义鼠标悬停在元素上时元素的样式，比如改变颜色、背景、字体等。

简单来说，:hover伪类可以增强用户与网页的交互体验，让用户在视觉上能够感受到操作的反馈。

下面是一个简单的例子，展示了如何通过CSS为卡片添加悬停效果（没咋学过前端，凑合用吧）

简单来说就是通过在图片外面套一个box，通过他的hover去做，核心代码如下：

.box:hover {transform: translateY(-10px);box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
}

更详细的代码如下：

<template><div class="box"><el-card class="card" shadow="hover">卡片代码</el-card></div>
</template>
​
<script setup lang="ts">
​
</script>
​
<style>.box:hover {transform: translateY(-10px);box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);}.card {width: 230px;height: 335px;background-image: url('../assets/img.png');background-size: cover; /* 图片覆盖整个容器 */background-position: center; /* 图片居中显示 */position: relative;}
</style>

在上述代码中，.card 类定义了卡片的初始样式，而 .box:hover 选择器则定义了当鼠标悬停在卡片上时的样式。使用 transition 属性可以实现平滑的过渡效果。

你可以根据自己的需求调整背景颜色、边框、阴影等样式属性，以达到突出卡片的效果。同时，也可以通过JavaScript来添加更复杂的交互效果。这里就不做展示了