如何解决如何在 Material-UI 中保持兄弟的悬停效果
卡片组件
CTA
卡片的 CSS 样式
<CTA @click="$ga(...)">
当我将鼠标悬停在我的卡片上时,会出现不透明度悬停效果,但是当我移动到心形或星形组件时,不透明度悬停效果就会消失。我希望悬停效果即使在我将鼠标悬停在我的星星和心形组件上时也能保持。当我将鼠标悬停在星星和心脏组件上时,有什么方法可以使不透明度悬停效果保持在那里
解决方法
以下是执行此操作的一种方法的示例。该解决方案的关键方面是在 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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。