How can I achieve hover effect? One element with hover influence on behaviour another?

Question

I have project on Gatsby+SASS and trying to implement next hover effect ---> I have titele h1 and parent arrow element - FontAwesomeIcon. And I wanna implement CSS properties for FontAwesomeIcon element when I hover title h1. So I know that in pure HTML and CSS I can do it with ".title:hover .arrow { transform: translateX(100px);} or like this ".title:hover~.arrow { transform: translateX(100px);}. In SASS I only can use .block:hover{.title {transform: translateX(100px);}}. Is it possible to implement such effect without parent element for childrens (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)

I am not completely sure what your problem is but I hope [this can help you](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Sergio Moreno, Dec 04 '20 at 07:58
Thank you for quck answer, but all this solutions don't work in SASS :( — Gregory Sidh, Dec 04 '20 at 08:11

score 0 · Answer 1 · answered Dec 04 '20 at 08:24

0

This worked for me:

In SASS you can nest elements like so. And the & symbol refers to the object that you are nested in.

.outcomes_h1:hover {
    &~ .outcomes_arrow{
        transform: translateX(100px)
    }
}

answered Dec 04 '20 at 08:24

Sergio Moreno

25
1
7

score 0 · Accepted Answer · answered Dec 04 '20 at 08:33

Next code help me (I change "FontAwesomeIcon" position, so "FontAwesomeIcon" and h1 become siblings):

          <div className={classNames(style.content_1600, style.flow_row)}>
            <div className={style.outcomes_info}>
              <div className={style.outcomes_animation}>
                <h1 className={style.outcomes_h1}>
                  Web development
                </h1>
                <FontAwesomeIcon icon={faArrowRight} className={style.outcomes_arrow}/>
              </div>
              <p className={style.outcomes_p}>
                Web-based solutions for small and medium enterprises and startups
              </p>
            </div>
          </div>

SASS

.outcomes_arrow
  padding: 130px 0 0 40px
  font-size: 5rem
  transition: 1s

.outcomes_h1:hover~.outcomes_arrow
    transform: translateX(100px)

Velid Duranović · Answer 3 · 2020-12-04T08:39:47.953

You should use Javascript or change your HTML structure so, outcomes_arrow becomes sibling to h1 and p and it will work with your css/sass.

<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 className="outcomes_arrow">
         <FontAwesomeIcon icon={faArrowRight}/>
     </div>
</div>

How can I achieve hover effect? One element with hover influence on behaviour another?

3 Answers3