reactjs - 当我悬停在父元素上时，如何在 jss 中选择子元素

Question

求助!

当我悬停到父元素时，如何在jss中选择子元素？

其实我尝试了很多选项，比如，out of this answer How to use child selectors in JSS

但是没用

parent: {
 '&: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

在“&:hover”之后使用“$”作为前缀“title”。

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