三态关闭按钮

Question

在过去的时间里，我的团队在我们的React应用程序中使用了来提供电源模块。但是我们放弃了这个库，转而使用一个定制的UI库。作为这一改变的一部分，我已经构建了一个自定义关闭按钮，它使用了特殊设计的"X“图像。这个"X“可以在任何给定的时间显示三幅图像中的任何一幅：

普通"X"

• Hover-state

1. “X”
2. 禁用"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仍然出现。我原以为上面的第四条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的第三个元素。

这就意味着有三层结构。我想你想做的是：

.close-button.disabled (意思是，禁用类也存在于该元素中)，只有在该元素之后添加:hover，如下所示：

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

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