包含链接的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样式列表

回答

相关问题