Javascript 如何在材质UI中保持同级的悬停效果

卡片组件

import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
});

const Cards = () => {
  const [showComponent, setShowComponent] = useState(false);
  const classes = useStyles();

  const handleToggleHoverIn = (event) => {
    event.preventDefault();
    setShowComponent(true);
  };

  const handleToggleHoverOut = (event) => {
    event.preventDefault();
    setShowComponent(false);
  };

  console.log("The state showComponent value is ", showComponent);

  return (
    <div className={styles.container}>
      <Card
        onMouseEnter={handleToggleHoverIn}
        onMouseLeave={handleToggleHoverOut}
        className={classes.root}
      >
        <CardActionArea>
          <div id={styles.imageCentre}>
            <CardMedia
              component="img"
              alt=""
              className={styles.image}
              image={image}
              title="Contemplative Reptile"
            />

            {/*
            here when I hover over my <Stars/> and  <FavoriteBorderIcon/>, the hover effect of opacity that I have on
            my Card's image, vanishes
             */}
            {showComponent ? (
              <>
                <div id={styles.stars}>
                  <Stars />
                </div>
                <FavoriteBorderIcon fontSize="large" id={styles.heart} />
              </>
            ) : null}
          </div>
          <CardContent>
            <Typography
              gutterBottom
              variant="h5"
              component="h2"
              id={styles.textCentre}
            >
              Printed round Neck
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              <div class="text">
                <p id={styles.price}>
                  <b>Rs. 454</b>
                  <strike>Rs. 699</strike>
                  <span style={{ color: "#FF7F7F" }}> (35 % off) </span>
                </p>
              </div>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </div>
  );
};

export default Cards;

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

---

下面是一个这样做的例子。解决方案的关键方面是在img、stars和icon元素的公共父级上使用

：hover

伪类。在我的示例中，这是通过应用于

CardActionArea

元素的

action

类完成的。我的示例是使用

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardMedia”导入CardMedia；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/FavoriteBorder”导入FavoriteBorder图标；
从“@material ui/lab/Rating”导入评级；
const useStyles=makeStyles({
根目录：{
最大宽度：345
},
媒体：{
身高：140
},
行动：{
职位：“相对”，
“&：悬停$media”：{
不透明度：0.5
}
},
最喜爱的：{
位置：“绝对”，
前10名，
左:10,，
颜色：“白色”
},
评级：{
位置：“绝对”，
前100名，
左：100
}
});
导出默认函数MediaCard（）{
const classes=useStyles（）；
返回(
蜥蜴
蜥蜴是一种广泛分布的有鳞爬行动物，有6000多种
物种，分布于除南极洲以外的所有大陆
分享
了解更多
);
}

---

尝试将您的明星和心脏组件移动到CardMedia组件中。

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>
  );
}