I am working on a project using Gatsby and SASS, and I am trying to implement a hover effect where the FontAwesomeIcon element changes its CSS properties when hovering over the title h1. In pure HTML and CSS, this can be achieved using ".title:hover .arrow { transform: translateX(100px);}" or ".title:hover~.arrow { transform: translateX(100px);}". However, in SASS, the only option seems to be using ".block:hover{.title {transform: translateX(100px);}}". Is there a way to achieve this effect without having a parent element for the children (title and arrow)?
import React from "react"
import style from "./mainPromo.module.sass"
import classNames from "../../helpers/classNames"
import Slider from "react-slick"
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faArrowRight} from '@fortawesome/free-solid-svg-icons'
const MainPromo = () => {
const settings = {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
arrows: false,
dotsClass: "orange_line_slick_dots",
dots: true,
}
return (
<Slider className={classNames(style.section, style.promo)} {...settings}>
<div>
<div
className={classNames(
style.section,
style.justify_center,
style.outcomes
)}
>
<div className={classNames(style.content_1600, style.flow_row)}>
<div className={style.outcomes_info}>
<h1 className={style.outcomes_h1}>
Web development
</h1>
<p className={style.outcomes_p}>
Web-based solutions for small and medium enterprises and startups
</p>
</div>
<div className="outcomes_arrow">
<FontAwesomeIcon icon={faArrowRight}/>
</div>
</div>
</div>
</div>
</Slider>
)
}
export default MainPromo
SASS
.outcomes_arrow
padding: 120px 0 0 40px
font-size: 5rem
transition: 1s
.outcomes_h1:hover~.outcomes_arrow
transform: translateX(100px)