这是我网站的 HTML 示例。当某些类添加到带有 img 的容器上时,我想更改 CSS。在这种情况下,一个类被添加到 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>
最佳答案
是的,这仅使用 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>
关于javascript - 当一个类被添加到另一个类中时,在容器类上添加 CSS,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52846500/