时间戳

首页 > 解决方案 > SCSS - 悬停在多个元素上？

sass - SCSS - 悬停在多个元素上？

问题描述

你好 ！我的第一个问题是我的第一个帖子......！:D

我不明白为什么我的两个元素不受悬停的影响。只有 img 被激活。

我的代码 HTML

    <Link
      to={{
        pathname: `/live/${loginName}`,
      }}
    >

      <img
        src={image}
        alt={`stream ${gameName} in progress`}
        className="channelStream__img"
      />

    </Link>

    <span className="channelStream__viewers">{`${changeTypeNumberOfViewers(viewer)} spectateurs`}</span>

    <span className="channelStream__live">{type}</span>

  </header>

我的scss

.channelStream {

&__img {

    &:hover {

    transform: translate(.4rem, -.4rem); 
  
      ~ .channelStream__live, ~ .channelStream__viewers {

        color: blue;
      }
    }
  }

多谢

标签： sasshover

解决方案

我找到了解决这个问题的方法！我刚刚改变了班级的位置，我认为问题出在我的双右括号..

我的新代码：

<header className="channelStream__header">
        <div className="backgroundImg" />
        <Link
          to={{
            pathname: `/live/${loginName}`,
          }}
          className="channelStream__link"
        >
          <img
            src={image}
            alt={`stream ${gameName} in progress`}
            className="channelStream__img"
          />
        </Link>
        <span className="channelStream__viewers">{`${changeTypeNumberOfViewers(viewer)} spectateurs`}</span>
        <span className="channelStream__live">{type}</span>
      </header>

和我的 CSS

&__link:hover {
    .channelStream__img, ~.channelStream__live, ~.channelStream__viewers {
    transform: translate(.4rem, -.4rem);      
    }

推荐阅读