Question

我有一个可折叠面板，我希望更改图像（从+到 - ）。我在网上找到了一些解决方案，我希望通过css实现。但是，出于某些原因，我的CSS有问题。有人可以告诉我到底是什么吗？

HTML

       <div class="panel panel-default at-panel">
          <div class="panel-heading at-panel-heading">Panel<img class="collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA"/></div>
          <div id="panelBodyNA" class="panel-body at-panel-body collapse">
            <p> Test</p>
          </div>
        </div>

CSS

img.at-collapse-button.collapsed:before{
    content:url("../img/plus.png");
}

img.at-collapse-button:before{
    content:url("../img/minus.png");
}

Answer 1

你不能使用：在带有图像元素的伪元素之前。你必须遵循这种方法：

<div class="panel panel-default at-panel">
  <div class="panel-heading at-panel-heading collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA">Panel</div>
  <div id="panelBodyNA" class="panel-body at-panel-body collapse">
    <p> Test</p>
  </div>
</div>

然后你说：

.at-collapse-button.collapsed:before{
    content:url("../img/plus.png");
}

.at-collapse-button:before{
    content:url("../img/minus.png");
}

或者您想拥有的任何其他CSS，因为内容网址不会为您带来图像。

但你可以按照你想要的那样操纵你的伪元素：

.at-collapse-button.collapsed:before{
   position: relative;
   width: 20px;
   height: 20px;
   background-image:url("../img/plus.png");
}

可折叠面板+按钮问题

1 个答案: