css 使用“已保存”或“已删除”类时出现问题

vc6uscn9 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(130)

我想用两个类来改变这个按钮的图标，'saved'和'removed'。我已经定义了如下样式，但是当只使用'saved'或'removed'时，样式不能正确显示，我找不到原因。请指导我。

index.js

<button class="icon-btn has-state saved" aria-label="Add to saved recipes">
<span class="material-symbols-outlined bookmark-add" aria-hidden="true" >bookmark_add</span>
<span class="material-symbols-outlined bookmark-add" aria-hidden="true" >bookmark</span>
</button>

字符串

style.css

.has-state {
  position: relative;
  overflow: hidden;
}

.has-state::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: var(--transition-short);
}

.has-state:where(:hover, :focus-visible):not(:active)::after {
  background-color: var(--alpha-10);
}

.material-symbols-outlined {
  display: block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.saved .bookmark-add,
.removed .bookmark {
  display: none;
}

.saved .bookmark {
  font-variation-settings: "FILL" 1;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: var(--primary-container);
  border-radius: var(--radius-circle);
}

型

css

来源：https://stackoverflow.com/questions/77726175/trouble-displaying-styles-using-saved-or-removed-classes

1条答案

按热度按时间

ego6inou1#

假设“样式显示不正确”是为了传达这样一个事实，即当saved在<button>上时没有图标出现，那么看起来你可能想让类bookmark在第二个<span>上，而不是bookmark-add上：

@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200);

.has-state {
  position: relative;
  overflow: hidden;
}

.has-state::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: var(--transition-short);
}

.has-state:where(:hover, :focus-visible):not(:active)::after {
  background-color: var(--alpha-10);
}

.material-symbols-outlined {
  display: block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.saved .bookmark-add,
.removed .bookmark {
  display: none;
}

.saved .bookmark {
  font-variation-settings: "FILL" 1;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: var(--primary-container);
  border-radius: var(--radius-circle);
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 使用“已保存”或“已删除”类时出现问题

1条答案

相关问题

热门标签

最新问答