Question

在过去的几个小时里，我一直在努力解决这个问题，似乎无法解决这个问题，所以任何帮助都会令人惊讶

我目前有一组CSS标签可以根据您点击的内容完美地更改内容，但是我希望标签图像根据用户选择进行更改...例如

如果有帮助，我相信这个代码会影响悬停/活动;

  [id^=tab]:checked + label {
    background: transparent;
    color: white;
    top: 0;
    padding: 3px;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }

如果3个标签图像有白色背景，我希望它们在悬停或活动时具有黑色背景。

PS。我了解如何选择更改图像，但同一图像适用于所有3个标签。

为Jan添加：

          .tabs label {
              display: block;
              padding: 1px 1px;
              border-radius: 2px 2px 0 0;
              color: #ffffff;
              font-size: 14px;
              font-weight: normal;
              font-family: 'Roboto', helveti;
              background: #transparent;
              cursor: pointer;
              position: relative;
              top: 2px;
              -webkit-transition: all 0.2s ease-in-out;
              -moz-transition: all 0.2s ease-in-out;
              -o-transition: all 0.2s ease-in-out;
              transition: all 0.2s ease-in-out;
              }
              #tab1 + label {
                  background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey.png');
                  }
                  #tab1 + label:hover {
                  background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey_HOVER.png');
                  }
                  #tab1:checked + label {
                  background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey_ACTIVE.png');
}

这仍然不起作用; \就好像我什么都没改变

Answer 1

您可以使用透明背景的图片吗？然后，您只需将背景颜色应用于标签即可。

否则，您需要为CSS中的每个标签设置背景图像：

.tabs label {
    width: 169px;
    height: 44px;
}
#tab1 + label {
    background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey.png');
}
#tab1 + label:hover {
    background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey_HOVER.png');
}
#tab1:checked + label {
    background-image: url('http://coins4fut.com/media/wysiwyg/xboxgrey_ACTIVE.png');
}

/* Repeat for tabs 2 and 3 */

...并删除HTML中的img标记：

<li style="color: transparent;">
    <input id="tab1" type="radio" name="tabs" checked="checked" />
    <label for="tab1"></label>
    ...
</li>

Answer 2

您可以采取的方法并不多。获得后续效果的最佳方法是使用两个不同的图像并使用css / javascript交换它们或使用透明图像（即只显示图标和文本）并更改背景CSS。我推荐后者，因为它最接近你已经拥有的。

但是，如果您处于牛仔心情中：在这种特殊情况下（因为您使用的是灰度图像），您可以使用反转滤镜，但它只支持chrome / safari（webkit）基于浏览器。）

将它应用于您的CSS中：

[id^=tab]:checked + label {
  background: transparent;
  color: white;
  top: 0;
  padding: 3px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

顺便说一句，我觉得有必要给你一些提示：

第1课：＆＃39;字体＆＃39; element已弃用，因此请使用＆span;＆＃39; span＆＃39;相反，对于这种事情（它是一个内联元素，比如＆＃39; font＆＃39;是）。

第2课：没有HTML5等效项，因此请使用＆＃39; auto＆＃39;在左右边距上居中对齐（仅适用于具有特定宽度的元素，在CSS中设置）。

第3课：不要使用内联样式，将它全部放在CSS中。添加＆＃39; style＆＃39;属性使得阅读/维护更加困难，更难以帮助您！：）

第4课：不要使用这么多ID，而是使用css类。你应该只是谨慎地使用ID。

祝你好运！

选择/活动时CSS按钮图像更改？

2 个答案: