包含鏈接的CSS樣式列表

我有一個CSS問題，這讓我很不高興。我有一個無序列表自定義符號圖片：

.mainTable ul { 
    list-style-position: inside; 
    list-style-image: url(../img/bullet_white.png); 
    line-height: 18px; 
    color: #335; 
}

現在有的這些列表項包含鏈接和一些不。對於那些做的，我希望子彈在翻滾時改變。不要太棘手，你會覺得......以下是我標誌着它：

.mainTable ul li a:link { 
    padding-left:0px; // using padding as a test 
} 
.mainTable ul li a:hover { 
    list-style-image: url(../img/bullet_red.png); 
    padding-left:2px; // padding changes (moves link text), but bullet's still white 
}

現在我sussed（如填充的變化），其造型被應用到的內在聯繫，而不是「李「容器。我想測試：

.mainTable ul li:hover

和圖像的變化，但在變化範圍爲所有「禮」的標籤（因爲這是我已經告訴它做的事），但是這不是我後。必須有一個簡單的方法來做到這一點，而不是訴諸於js，但如果我能弄明白，我會被誤解。

有什麼建議嗎？所有幫助（哪怕它只是「你需要JS你熔核使用」）衷心感謝:)

丹尼

得到它排序！（不能回答我自己的問題 - 出於某種原因...）

謝謝你們的報告。答案是上述建議的混合體。將子彈從li標籤移動到錨點上工作，但沒有鏈接的列表項目沒有得到子彈...... DOH！

然後，我設置了另一個類「notALink」，並在其上停留了我的默認列表樣式。這裏的標記，如果任何人的興趣......

.mainTable ul { /* kill formatting on the ul */ 
    list-style-position: inside; 
    line-height: 18px; 
    color: #335; 
    list-style-type: none; 
} 
.mainTable ul li a:link { /* link becomes the list, essentially */ 
    list-style-image: url(../img/bullet_white.png); 
    list-style-position: inside; 
    display: list-item; 
} 
.notALink { /* looks like link above, just ain't a link */ 
    list-style-image: url(../img/bullet_white.png); 
    list-style-position: inside; 
    display: list-item; 
} 
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */ 
    list-style-image: url(../img/bullet_red.png); 
}

工作正常 - 乾杯偷看，你已經挖我出一個小洞的，我挖自己

丹尼

來源

2012-02-28 allnodcoms

你需要使用js你的金塊！或者，也可以改變任何你需要添加一個類的服務器端代碼到裏面有錨的類。 – 2012-02-28 12:22:08

謝謝艾 - 看到一個人一英里下來......; o） – allnodcoms 2012-02-28 12:35:55

編輯OP提供我的答案。我創建了一個類，我通過PHP添加了這個列表元素沒有鏈接......乾杯！ – allnodcoms 2012-02-28 13:12:14

不，沒有辦法在純CSS（2或3）中將孩子懸停在父母上。請參閱：Is there a CSS parent selector?

所以，你有兩個選擇：

使用JavaScript

或

離開列表樣式爲空，並添加子彈，孩子的（a或別的東西）。這樣，你將改變a的風格，而不是li。 這是我會做什麼;]

或（從姜毅評論）

添加額外的類含li元素a

來源

2012-02-28 12:17:04

乾杯亞當，我猜這是錯誤的方式 - 我也喜歡選項b）。顯然需要更多的咖啡...... – allnodcoms 2012-02-28 12:34:40

雖然這是一個很好的解決方案（爲未鏈接的項目設置'span'而不是'a'），添加其他元素（或類）並非完全必要。 – powerbuoy 2012-02-28 12:36:24

是的，我總是喜歡黑客只是不要把這些額外的跨度;] – 2012-02-28 12:45:17

-1

嘗試運用造型到

.mainTable ul li:hover li

或類似的東西。它應該覆蓋父母的規則。

編輯：對不起，我沒有完全理解你的問題。在我看來，使用css是不可能的，因爲您必須將樣式應用於「沒有'後代'的li」，我認爲這不能用css選擇器表示。作爲一個解決方案，爲了不使用腳本，我建議你改變鏈接的背景而不是子彈圖像。

來源

2012-02-28 12:15:25

所以你建議添加另一個列表？或者是什麼？這個例子不會幫助。 – 2012-02-28 12:20:46

確實，這只是把它變成一個遞歸的問題; o） – allnodcoms 2012-02-28 12:46:52

你可以做的是風格a爲display: block並將其移動到左側（使用負餘量）以覆蓋li：s子彈。檢查此琴：

http://jsfiddle.net/TG5Lj/

您可能需要設置一個background-color爲a，以及如果您a：■background-image不完全覆蓋li：秒。

來源

2012-02-28 12:34:42 powerbuoy

包含鏈接的CSS樣式列表

回答

相關問題