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

Question

我有关于 Gatsby+SASS 的项目并尝试实现下一个 hover 效果 ---> 我有标题 h1 和父箭头元素 - FontAwesomeIcon。 当我 hover 标题 h1 时，我想为 FontAwesomeIcon 元素实现 CSS 属性。 所以我知道在纯 HTML 和 CSS 中我可以用“.title:hover.arrow { transform: translateX(100hpx);} transform: translateX(100hpx);} 或这样的“。 . 在 SASS 我只能使用.block:hover{.title {transform: translateX(100px);}}。 是否可以在没有子元素（标题和箭头）的父元素的情况下实现这种效果？

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 中，您可以像这样嵌套元素。 &符号是指您嵌套的 object。

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

Answer 2

下一个代码帮助我（我更改“FontAwesomeIcon”position，所以“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 结构，因此，结果箭头成为 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>