Question

这是我网站的HTML示例。当某个类添加到带有img的容器中时，我想更改CSS。在这种情况下，将onclick类添加到img。添加类并删除类时，如何添加CSS。请参阅下面的示例。我看到了一些使用javascript的教程，但是仅使用CSS也可以做到吗？

.container //when image is unselected{
    border: 2px dotted;
}

.container //when image is selected{
    border: 2px solid;
}

//When image is unselected
    <div class="container">
      <div class="checkbox">
       <div class="value">
        <img class="some-image">
       </div>
      </div>
    </div>

//When image is selected
    <div class="container">
      <div class="checkbox">
       <div class="value">
        <img class="some-image selected">
       </div>
      </div>
    </div>

Answer 1

是的，只有CSS才有可能。此处的关键是使用contenteditable global attribute和:target pseudo class，如下所示。

.container {
  display: inline-block;
}

.container:focus {
  outline: none;
}

.container:focus img {
  border: 2px dotted;
}

.container img {
  border: 2px solid;
}

<div>
  <div class="container" contenteditable>
    <div class="checkbox">
      <div class="value">
        <img class="some-image" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>

  <div class="container" contenteditable>
    <div class="checkbox">
      <div class="value">
        <img class="some-image" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

Answer 2

这是很容易用JavaScript完成的事情。 JS允许您编写许多事件驱动的代码。这是您要在JS中执行的操作的示例。

Link

如果您正在寻找纯CSS解决方案，则最接近的结果是：

.container {
  border: 2px dotted;
}

.container:active {
  border: 2px solid;
}

当在另一个类中添加一个类时，在容器类上添加CSS，反之亦然

2 个答案: