Demo Fiddle

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，例如，提升一个父级别，然后向上和向下移动（用外行术语）。他们仅限于识别兄弟姐妹和孩子。

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

CSS在活动时更改不同元素的样式

1 个答案:

Demo Fiddle