【问题标题】：CSS change style of different element upon activeCSS在激活时改变不同元素的样式
【发布时间】：2014-03-24 15:34:55
【问题描述】：

尝试通过单击另一张图片（图片库查看器）来更改图片的内容，使用纯 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。

有人有什么想法吗？

谢谢。

【问题讨论】：

这是不可能的 - CSS 规则取决于下降程度，并且不能遍历 DOM，例如，上升一个父级别，然后移动和返回（用外行术语）。
this 怎么样？您可以单击顶部的红色框，它将更改另一个框的样式（在本例中为颜色）。对我来说似乎很好。除非我错过了什么？
两个cube 元素处于相同的“级别” - 在您的示例中，您的图像是嵌套的。
我明白了。你能推荐一个简单的替代解决方案吗？
要么使它们处于同一级别 - 要么尝试将效果应用于父元素。

标签： html css gumby-framework

【解决方案1】：

正如 cmets 中所述，这在您当前实施的方式中是不可能的。

CSS 规则取决于 decendancy 的程度，并且不能遍历 DOM，例如，上升一个父级别，然后移动并返回（通俗地说）。它们仅限于识别兄弟姐妹和孩子。

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);
}

【讨论】：

谢谢，这正是我要找的。span>