試圖修復標籤上的背景圖片：檢查

我試圖解決一些其他開發人員在這個網站做的：http://alamodecreamery.com/products-page/accessories/girls-atom/試圖修復標籤上的背景圖片：檢查

如果你將鼠標懸停在出現鬆餅圖標大小，但是當項目被選中（單選按鈕）背景消失。我需要一個標籤：選中背景以顯示華夫餅。我在wpsc-default.css的第1150行找到了CSS選擇器，並添加了一個標籤：active，用於測試哪些工作正常（aqua on active）。

任何人都可以找出爲什麼：選中的背景不工作？我試過了幾件不同的東西，都失效了：

label + input[type="radio"]:checked { 
    background:pink !important; 
} 

input[type="radio"]:checked { 
    background:pink !important; 
} 

.wpsc_variation_forms label:checked {background-color: green !important;}

在此先感謝！

來源

2013-12-20 Vinnie James

你正在嘗試什麼不能工作。您有一個結構，其中收音機input包含在label內。 label的大小與華夫餅相匹配，懸停時改變其背景。當單選按鈕被選中時，input獲得:checked狀態，而不是label！在CSS中，現在，遺憾的是select an element based on a descendant's state不可能。因此，純CSS不可能根據其所包含元素之一的僞類來改變label的外觀。

我會建議添加一些JavaScript，當單選按鈕切換時，切換label上的一個類，將是最簡單的修復。

易怒的旁註：有過，在過去的「家長選擇」多個提案，並已全部被瀏覽器開發人員擊落，因爲它是從性能的角度來看是不可行的，由於方式的DOM和CSS匹配起來。如今引擎效率很高，討論已經重新開始，但仍處於非常初步的階段。在CSS4曲面之前不要指望任何東西。

來源

2013-12-20 22:28:01

感謝您的投入，我會考慮一個js的解決方案。雖然CSS將是首選 –

標籤：已檢查無效。檢查僅用於輸入。

喜歡的東西

wpsc_variation_forms label + input:checked

可能會更好地工作

來源

2013-12-20 22:29:44

由於'input'在'label'內，因此無法工作。 '+'用於[選擇相鄰的兄弟姐妹]（https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors）。 –

而且這也不會針對標籤。 – Musa

是的，那也沒用 –

試圖修復標籤上的背景圖片：檢查

回答

相關問題