Question

当该元素的父元素具有不同的类时，我正在尝试更改材质图标的内容。

因此，当图标单独显示时，它可能具有连字check_box_outline_blank，但当该项的父项具有不同的类时，连字将为check_box。

如果在非伪造物品上允许content属性，我会做类似的事情

figure.selected figcaption i {
  content: "check_box";
}

但这不是一件事......

https://jsfiddle.net/frumbert/mw1fjs1r/

我试图对psuedo元素做同样的事情，但我需要隐藏现有图标内的文本。我试图遵循https://codepen.io/marblegravy/pen/BpyWLE使用文字缩进技巧（并且有效），但我的尝试不起作用。

我相当接近，但正如你在小提琴中看到的那样，figcaption没有psuedo元素版本的背景（或其他属性 - 边框，填充等）。

我更喜欢（非脚本）方式更改素材图标，最好使用名称（这是从https://material.io/icons/复制图标代码的皮塔饼！）

Answer 1

正如您解释的那样，我们无法使用内容属性。我在html和css中做了一些小改动。我把check_box_outline_blank和check_box放在一起，当我们在图上选择了类时，在左边滑动。

以下是链接：https://fiddle.jshell.net/dw5ra8xL/1/ 只需将选定的类添加到示例中的图中

希望这适合你。

由于

<figure>
    <img src="https://placehold.it/150">
<div>   <figcaption>
  <i class="material-icons">check_box_outline_blank check_box</i>
</figcaption></div>
</figure>

<figure class="selected">
    <img src="https://placehold.it/150">
    <div><figcaption><i class="material-icons">check_box_outline_blank check_box</i></figcaption>
</div>

figure div {
    position: absolute;
    top: 0;
    right: 0;
   width: 24px;
    height: 24px;
    overflow: hidden;
}
figure figcaption {
    position: relative;
    background-color: #999;
    color: #fff;
    left: 0px;
    width: 55px;
    overflow: hidden;
}
figure.selected figcaption {
     left: -29px;
}

从父类改变材料图标？

1 个答案: