2

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

我正在使用该gumby.css 框架，目前有以下 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;
}

第一个 css 规则#sect .three.columns img:hover完美运行，表明我选择了正确的元素。但是第二个#sect .one.column img:active ~ #sect .three.columns img在激活时什么也不做。

的含义请参考这里~。

有人有想法么？

谢谢。

4

1 回答 1

3

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

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

该content样式也仅适用于:before伪:after元素。

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

演示小提琴

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);
}
于 2014-03-24T15:55:55.447 回答