CSS、Bootstrap或MaterialUI是否存在类似class="hover:shadow"的悬停触发样式类功能？

Awesome question! Let’s break down how you can achieve this hover-triggered shadow effect in CSS, Bootstrap, and Material UI, since none of them have a ready-made hover:shadow class out of the box:

Native CSS doesn’t come with a pre-built hover:shadow class, but rolling your own is trivial. You just define a custom class that uses the :hover pseudo-selector to apply the shadow only on interaction:

.hover-shadow:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Adjust shadow values to your taste */
}

Then add the class to your element in HTML:

<div class="hover-shadow">Hover over me for a shadow!</div>

This gives you exactly the behavior you’re asking for—no bloated library classes, just targeted, custom styling.

Bootstrap doesn’t ship with a global hover:shadow utility class (for good reason, like you said—adding hover variants for every single utility would bloat the library). But you can easily combine Bootstrap’s existing shadow utilities with a little custom CSS to get the same effect:

First, Bootstrap has predefined shadow classes like shadow-sm, shadow, and shadow-lg, along with CSS variables for consistent styling. You can leverage these to create a hover-specific class:

.hover-shadow:hover {
  box-shadow: var(--bs-shadow-lg) !important; /* Use Bootstrap's shadow variable */
}

Or if you want to pick a custom shadow that matches Bootstrap’s design system, you can reference its shadow values directly. Then just add hover-shadow to your element alongside any other Bootstrap classes:

<div class="p-4 border hover-shadow">Bootstrap element with hover shadow</div>

Bootstrap’s table-hover is a special-case component class, but this custom approach works for any element without cluttering the library.

MUI doesn’t have a pre-made hover:shadow class either, but its styling system makes it easy to add hover effects—whether you’re using MUI v5 (with Emotion/Styled Components) or v4 (with makeStyles):

MUI v5 (Recommended) #

Use the sx prop for inline styling with hover states, or create a reusable styled component:

import Box from '@mui/material/Box';

// Inline approach
<Box 
  sx={{
    padding: 2,
    border: 1,
    borderColor: 'divider',
    '&:hover': {
      boxShadow: 3, // MUI's preset shadow level (0-24 for varying intensity)
    }
  }}
>
  Hover me for MUI shadow
</Box>

// Reusable styled component
import { styled } from '@mui/material/styles';

const HoverShadowBox = styled(Box)(({ theme }) => ({
  '&:hover': {
    boxShadow: theme.shadows[3],
  },
}));

// Use it like any other component
<HoverShadowBox p={2} border={1} borderColor="divider">
  Reusable hover shadow box
</HoverShadowBox>

MUI v4 #

Use makeStyles to define a custom class with hover behavior:

import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';

const useStyles = makeStyles((theme) => ({
  hoverShadow: {
    '&:hover': {
      boxShadow: theme.shadows[3],
    },
  },
}));

function MyComponent() {
  const classes = useStyles();
  return (
    <Box className={classes.hoverShadow} p={2} border={1}>
      MUI v4 hover shadow
    </Box>
  );
}

Quick Side Note #

That hover:shadow syntax you’re craving is actually a core feature of Tailwind CSS—a utility-first framework where every utility class can be prefixed with state modifiers like hover:, focus:, etc. If this style of styling resonates with you, you could even combine Tailwind with Bootstrap/MUI (though that takes some configuration).

内容的提问来源于stack exchange，提问作者DragonKnight