如何在 Material-UI 中保持兄弟的悬停效果

问题描述

卡片组件

CTA

卡片的 CSS 样式

<CTA @click="$ga(...)">

当我将鼠标悬停在我的卡片上时，会出现不透明度悬停效果，但是当我移动到心形或星形组件时，不透明度悬停效果就会消失。我希望悬停效果即使在我将鼠标悬停在我的星星和心形组件上时也能保持。当我将鼠标悬停在星星和心脏组件上时，有什么方法可以使不透明度悬停效果保持在那里

Live Link

解决方法

以下是执行此操作的一种方法的示例。该解决方案的关键方面是在 img、stars 和 icon 元素的公共父级上使用 :hover 伪类。在我的示例中，这是通过应用于 action 元素的 CardActionArea 类完成的。我的示例使用 makeStyles，但您可以使用以下内容在 CSS 中实现相同的效果：

#imageCentre:hover .image {
  opacity: 0.5;
}

看起来您尝试了类似的东西（注释掉的 #imageCenter:hover 样式），但是由于您没有针对不透明度的后代 .image 类，不透明度会影响星星和最喜欢的以及您可能不想要的图标。

这是一个完整的工作示例：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import Rating from "@material-ui/lab/Rating";

const useStyles = makeStyles({
  root: {
    maxWidth: 345
  },media: {
    height: 140
  },action: {
    position: "relative","&:hover $media": {
      opacity: 0.5
    }
  },favorite: {
    position: "absolute",top: 10,left: 10,color: "white"
  },rating: {
    position: "absolute",top: 100,left: 100
  }
});

export default function MediaCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.action}>
        <CardMedia
          component="img"
          className={classes.media}
          image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles,with over 6,000
            species,ranging across all continents except Antarctica
          </Typography>
        </CardContent>
        <FavoriteBorderIcon className={classes.favorite} />
        <Rating className={classes.rating} name="rating" />
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}