Question

请帮助！当我将鼠标悬停在父元素上时，如何在jss中选择子元素

实际上，我尝试了很多选择，例如，从这个答案中 How to use child selectors in JSS 但这没用

parrent: {
 '&:hover child': {
   color: 'red'
 }
}

specialOffer: {
        width: '100%',
        backgroundImage: 'url(' + specialOffersImg + ');',
        '&:hover': {
            transition: 'all 2000ms ease',
            padding: '200px 200px'
        }
    },

    title: {
        color: 'red'
    },

class SpecialsOffers extends Component {
    render() {
        return (
<section className={this.props.classes.specialOffer}>
                <div className={this.props.classes.specialOfferContainer}>
                    <div className={this.props.classes.description}>
                        <h3 className={this.props.classes.title}>
                            Special Offers
                        </h3>
                    </div>
                </div>
        );

    }

}
 </section>

如何通过将鼠标悬停在specialOffer类上来更改标题类样式

Answer 1

我认为您可以像这样使用它

"specialOffer:hover, title" : {
  display: "block";
}

请参阅w3schools中的this link

Answer 2

在'＆：hover'之后用'$'前缀'title'。

specialOffer: {
        width: '100%',
        backgroundImage: 'url(' + specialOffersImg + ');',
        '&:hover': {
            transition: 'all 2000ms ease',
            padding: '200px 200px'
        },
        '&:hover $title': { color:red; }
    }

当我将鼠标悬停在父级时，如何选择jss中的子级元素

2 个答案: