html - CSS 在激活时改变不同元素的样式

Question

尝试使用纯 HTML/CSS 通过单击另一张图像(图像库查看器)来更改图像的内容。

我正在使用gumby.css framework目前有以下 HTML:

<section id="sect">
    <div class="three columns">
        <img src"/images/help.png">
    </div>
    <div class="one column">
        <img src"/images/help.png">
    </div>
</section>

以及以下 CSS:

#sect .three.columns img:hover {
    content:url("/images/about.png");
    border: 5px solid red;
}

#sect .one.column img:active ~ #sect .three.columns img {
    content:url("/images/about.png");
    border: 5px solid red;
}

#sect . Three.columns img:hover 的第一个 css 规则运行良好，表明我选择了正确的元素。但第二个 #sect .one.column img:active ~ #sect . Three.columns img 在事件时不执行任何操作。

引用here了解 ~ 的含义。

大家有什么想法吗？

谢谢。

Answer 1

正如评论中所指出的，这在您当前实现的方式中是不可能的。

CSS 规则取决于下降的程度，并且不能遍历 DOM，也就是说，向上移动一个父级别，然后向下移动并返回(用外行术语来说)。他们仅限于识别 sibling 和 child 。

content 样式也仅可用于 :before 和 :after 伪元素。

因此，替代方法是将操作应用于父元素的 active 状态，删除子图像，并引用 background-image 而不是content 属性例如:

Demo Fiddle

HTML

<section id="sect">
    <div class="three columns"></div>
    <div class="one column"></div>
</section>

CSS

.column, .columns {
    height:200px;
    width:200px;
    background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
    background-size:cover;
}
.three.columns:hover ~ .one.column {
    border:1px solid red;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/9/9c/Image-Porkeri_001.jpg);
}