試圖通過使用純HTML/CSS單擊另一圖像（圖像庫查看器）來更改圖像的內容。活動時不同元素的CSS變化樣式

我使用的gumby.cssframework，目前有以下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的意思是~。

任何人有任何想法？

謝謝。

來源

2014-03-24 Travis Liew

這是不可能的 - CSS規則取決於遞延程度，並且不能遍歷DOM，比如說，上升一個父級，然後移動（通俗地說）。 – SW4

[this]（http://jsfiddle.net/9AbvE/951/）怎麼樣？您可以點擊頂部的紅色框，它會改變另一個框的樣式（在這種情況下是顏色）。對我來說似乎很好。除非我錯過了什麼？ –

這兩個'cube'元素都處於相同的「級別」 - 在您的示例中，圖像是嵌套的。 – SW4

正如評論中指出的那樣，這是不可能的，你現在正在實施。

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

來源

2014-03-24 15:55:55 SW4

謝謝，這就是我一直在尋找的。 –

活動時不同元素的CSS變化樣式

回答

Demo Fiddle

相關問題