How to choose child element in jss, when I am hover to parent

Question

Please help!

How to choose child element in jss, when I am hover to parent?

Actually I tried many options, for example, out of this answer How to use child selectors in JSS

but it did not work

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>

How I can change title class style by hover on specialOffer class?

Answer 1

Prefix 'title' with '$' after '&:hover'.

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