SCSS - 悬停在多个元素上？

如何解决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;
      }
    }
  }

非常感谢

解决方法

你有权利关闭括号吗？我看到 4 个开场和 3 个关门。 此外，编写像 &__img:hover {} 这样的规则可能更稳定 还要确认数字格式正确。

,

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

我的新代码：

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