CSS在激活時更改不同元素的樣式

Question

嘗試通過使用純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;
}

#sect .three.columns img:hover的第一個css規則運行正常，表明我選擇了正確的元素。 但是第二個#sect .one.column img:active ~ #sect .three.columns img在激活時不執行任何操作。

請參閱了這里的意思~ 。

有人有想法么？

謝謝。

Answer 1

如評論中所述，這在您當前實現的方式中是不可能的。

CSS規則取決於下降的程度，並且不能遍歷DOM，例如，向上提升一個父級，然后上下移動（以外行術語）。 他們僅限於識別兄弟姐妹和孩子。

content樣式也僅可用於:before和:after偽元素。

這樣，替代方法是將操作應用於父元素的active狀態，刪除子圖像，並引用background-image而非content屬性，例如：

演示小提琴

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