如何实现悬停效果？悬停对行为有影响的一个元素是另一个吗？

Question

我在 Gatsby+SASS 上有一个项目并试图实现下一个悬停效果 ---> 我有标题 h1 和 parent 箭头元素 - FontAwesomeIcon。当我悬停标题 h1 时，我想为 FontAwesomeIcon 元素实现 CSS 属性。所以我知道在纯 HTML 和 CSS 中我可以用 ".title:hover .arrow { transform: translateX(100px);} 或像这样 ".title:hover~.arrow {转换：translateX(100px);}。在 SASS 中我只能使用 .block:hover{.title {transform: translateX(100px);}}。是否可以在没有 parent 儿童元素（标题和箭头）的情况下实现这种效果？

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)

Answer 1

这对我有用：

在 SASS 中，您可以像这样嵌套元素。 & 符号指的是您嵌套的对象。

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

Answer 2

下一个代码帮助我（我改变了“FontAwesomeIcon”的位置，所以“FontAwesomeIcon”和h1成为兄弟姐妹）：

          <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)

Answer 3

您应该使用 Javascript 或更改您的 HTML 结构，这样，outcomes_arrow 就成为 h1 和 p 的同级，它将与您的 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?

html

javascript

css

sass

css-modules