使用 SASS 和 BEM 悬停在嵌套元素上答案

【问题标题】：Hover on nested elements using SASS and BEM使用 SASS 和 BEM 悬停在嵌套元素上
【发布时间】：2022-01-16 17:33:51
【问题描述】：

我尝试对按钮元素和按钮内的 SVG 使用悬停。但是这里的代码https://codepen.io/asssel/pen/wvrojOd 不适用于SVG。帮助我如何实现它。

.tag {
  width: 120px;
  padding: 6px 12px;
  border: 1px solid #1F1F1F;
  border-radius: 18px;
  cursor: pointer;
  color: #1F1F1F;
  background-color: white;

  &_label {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  &_remove {
    border: none;
    background-color: transparent;
  }

  &:hover, &_icon path {
    background-color: #1F1F1F;
    color: white; 
    stroke: white; 
  }
}

 <div class='tag'>
     <span class='tag_label'>default tag</span>
     <button class='tag_remove'>
        <svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke="#404040" stroke-width="2" stroke-linecap="square"/>
      </svg>
    </button>
</div>

【问题讨论】：

标签： svg sass bem

【解决方案1】：

首先，我将您的 CSS 更改为纯 CSS 以使其在 sn-p 中工作。

我猜主要问题是悬停效果。要更改<path> 的笔划，您的 CSS 选择器需要从悬停的元素开始。因此，将&_icon path 替换为&:hover &_icon path。

然后，您还要确保为 SVG 元素使用 fill 和 stroke 属性。

.tag {
  width: 120px;
  padding: 6px 12px;
  border: 1px solid #1F1F1F;
  border-radius: 18px;
  cursor: pointer;
  color: #1F1F1F;
  background-color: white;
  display: flex;
  align-items: center;
}

.tag_label {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag_icon path {
  stroke: #1F1F1F;
}

.tag_remove {
  border: none;
  background-color: transparent;
}

.tag:hover,
.tag:hover .tag_icon path {
  background-color: #1F1F1F;
  color: white;
  stroke: white;
}

<div class='tag'>
  <span class='tag_label'>default tag</span>
  <button class='tag_remove'>
    <svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke-width="2" stroke-linecap="square"/>
    </svg>
  </button>
</div>

【讨论】：