如何保持Material-UI中sibling的悬停效果

Question

卡片组件

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;

卡片的 CSS 样式

.image {
  width: 300px;
  justify-content: center;
}

.image:hover {
  opacity: 0.5;
}

#imageCentre {
  align-items: center !important;
  position: relative;
}

/* #imageCentre:hover {
  opacity: 0.5;
} */

#textCentre {
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  padding: 2em;
}

#price,
.text h3 {
  text-align: center;
}

#price b {
  padding-right: 0.5em;
  font-size: 1.3em;
}

#heart {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px 20px 0 0;
  color: aliceblue;
}

#stars {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-top: 50%;
}

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

Live Link

Answer 1

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

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

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

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

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

如何保持Material-UI中sibling的悬停效果

How to maintain the hover effect of the sibling in Material-UI

javascript

css

inline-styles

reactjs

material-ui