Question

Morning Guys，

我有一个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
}

现在我已经怀疑（作为填充更改）样式正在应用于内部链接，而不是“li”容器。我试过测试：

.mainTable ul li:hover

并且图像会发生变化，但是对于范围内的所有“li”标签都会发生变化（因为这就是我告诉它要做的事情），但这不是我追求的目标。必须有一个简单的方法来做到这一点，而不诉诸js，但如果我能弄清楚，我会被惹恼。

有什么建议吗？所有帮助（即使它只是“你需要使用js you nugget”）感激地赞赏：）

丹尼

GOT IT SORTED！（暂时还不能回答我自己的问题 - 出于某种原因......）

感谢排队的人。答案是上述建议的混合。将子弹从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);
}

工作正常 - 干杯偷看，你把我挖出一个我自己挖的小洞

丹尼

Answer 1

不，没有办法在纯CSS（2或3）中更改子鼠标悬停。请参阅：Is there a CSS parent selector?

所以你有两个选择：

使用JavaScript

或

将列表样式保留为空，并将子项添加到子项（a或其他内容）。这样，您将更改a的样式，而不是li。 这就是我要做的;]

或（来自易江评论）

为包含li
的a元素添加额外课程

Answer 2

您可以做的是将a设置为display: block并将其移到左侧（使用负边距）以覆盖li：s项目符号。检查这个小提琴：

http://jsfiddle.net/TG5Lj/

如果background-color：s a未完全覆盖a，则可能需要将background-image设置为li：

Answer 3

尝试将样式应用于

.mainTable ul li:hover li

或类似的东西。它应该覆盖父母的规则。

编辑：抱歉，我没有完全理解你的问题。在我看来，使用css是不可能的，因为你必须将样式应用于“没有'a'后代”的li，我认为不能在css选择器中表达。为了不使用脚本，我建议你改变链接的背景而不是子弹图像。

包含链接的CSS样式列表

3 个答案: