三态关闭按钮

Question

过去，我的团队使用 React Bootstrap 为我们的 React 应用程序中的模式提供动力。但是我们放弃了那个库，转而使用自定义构建的 UI 库。作为此更改的一部分，我构建了一个自定义关闭按钮，该按钮使用专门设计的“X”图像。这个“X”可以在任何给定时间显示三个图像中的任何一个：

1. 正则“X”
2. 悬停状态“X”
3. 禁用“X”

它工作得几乎完美，但有一个小问题。这是我的 React 组件中的相关代码：

<div className={getClasses()}
     data-testid={getDataTestId()}
     onClick={() => props.onClick()}
>
  <img className='close-icon'
       src={closeIcon}
       alt=''
  />
  <img className='close-icon-hover'
       src={hoverIcon}
       alt=''
  />
  <img className='close-icon-disabled'
       src={disabledIcon}
       alt=''
  />
</div>

仅供参考，div 的 className 有两个相关的样式类：close-button 和 disabled。所以这些都是可能的：

• <div className='close-button'
• <div className='close-button:hover'
• <div className='close-button disabled'
• <div className='close-button:hover disabled'

这是我编写的用于控制 X 外观的 SCSS 代码：

.close-icon-hover,
.close-button:hover .close-icon,
.close-button .close-icon-disabled,
.close-button:hover .disabled .close-icon-hover,
.close-button:hover .close-icon-disabled,
.disabled .close-icon,
.disabled .close-icon-hover {
  display: none;
}
.disabled .close-icon-disabled {
  display:inline;
}
.close-button:hover .close-icon-hover {
  display: inline;
}

现在一切正常，除了一件事：当disabled 存在时，hoverIcon 在鼠标悬停在顶部时仍会出现。我本来希望上面的第 4 条 SCSS 行可以防止出现悬停图标，但它没有：

.close-button:hover .disabled .close-icon-hover {
  display: none;
}

我的 SCSS 逻辑显然存在缺陷，但我还没有发现它。有人能看出问题吗？

Answer 1

元素内类的间距，例如你的：

<div className='close-button disabled'>

与css中类的间距不同，例如你的：

.close-button:hover .disabled .close-icon-hover {
  display: none;
}

上面的意思是，在类.close-button 的元素内，是类.disabled 的第二个元素，然后在它里面，是类.close-icon-hover 的第三个元素。

这意味着 3 层结构。我想你想做的是这样的：

.close-button.disabled（意思是同一个元素也存在禁用的类），然后才在其后添加:hover，如下所示：

.close-button.disabled:hover .close-icon-hover {}

在 CSS 选择器中，空格表示层次结构的跳跃，例如从父级到子级。在元素的 class 属性中，css 类需要它们之间的空格以将其分组并解释为单个实体:)