包含链接的CSS样式列表
上午伙计们,包含链接的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);
}
工作正常 - 干杯偷看,你已经挖我出一个小洞的,我挖自己
丹尼
不,没有办法在纯CSS(2或3)中将孩子悬停在父母上。请参阅:Is there a CSS parent selector?
所以,你有两个选择:
使用JavaScript
或
离开列表样式为空,并添加子弹,孩子的(a
或别的东西)。这样,你将改变a
的风格,而不是li
。 这是我会做什么;]
或(从姜毅评论)
添加额外的类含li
元素a
干杯亚当,我猜这是错误的方式 - 我也喜欢选项b)。显然需要更多的咖啡...... – allnodcoms 2012-02-28 12:34:40
虽然这是一个很好的解决方案(为未链接的项目设置'span'而不是'a'),添加其他元素(或类)并非完全必要。 – powerbuoy 2012-02-28 12:36:24
是的,我总是喜欢黑客只是不要把这些额外的跨度;] – 2012-02-28 12:45:17
尝试运用造型到
.mainTable ul li:hover li
或类似的东西。它应该覆盖父母的规则。
编辑:对不起,我没有完全理解你的问题。在我看来,使用css是不可能的,因为您必须将样式应用于“没有'后代'的li”,我认为这不能用css选择器表示。作为一个解决方案,为了不使用脚本,我建议你改变链接的背景而不是子弹图像。
所以你建议添加另一个列表?或者是什么?这个例子不会帮助。 – 2012-02-28 12:20:46
确实,这只是把它变成一个递归的问题; o) – allnodcoms 2012-02-28 12:46:52
你可以做的是风格a
为display: block
并将其移动到左侧(使用负余量)以覆盖li
:s子弹。检查此琴:
您可能需要设置一个background-color
为a
,以及如果您a
:■background-image
不完全覆盖li
:秒。
你需要使用js你的金块!或者,也可以改变任何你需要添加一个类的服务器端代码到里面有锚的类。 – 2012-02-28 12:22:08
谢谢艾 - 看到一个人一英里下来......; o) – allnodcoms 2012-02-28 12:35:55
编辑OP提供我的答案。我创建了一个类,我通过PHP添加了这个列表元素没有链接......干杯! – allnodcoms 2012-02-28 13:12:14