我有一个标题链接，如下所示，
<a href="#">Cat<span class="more">See More</span></a>
你看我在里面是为了向右边流动“看到更多”，所以我有以下css
.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}
我希望当我将鼠标悬停在文字“Cat”上时，“看到更多”会加下划线，但它在IE / Firefox中不起作用，但它可以在Chrome中使用。
任何人都知道为什么？
答案 0 :(得分：10)
任何人都知道为什么？
您在IE和Firefox中看到的实际上是预期的行为，在CSS2.1 spec中描述：
请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。
但等等，还有更多：
一些用户代理通过将装饰传播到后代元素来实现文本修饰，而不是如上所述保持恒定的厚度和线位置。这可以说是CSS2中更宽松的措辞所允许的。 SVG1，仅限CSS1和仅限CSS2的用户代理可以实现旧模型，并且仍声称符合CSS 2.1的这一部分。 （这不适用于本规范发布后开发的UAs。）
鉴于Chrome浏览器是一款CSS2.1浏览器，无论信不信由你，它实际上都出现了一个错误（恰好已经修补过了！）。 Here's the bug report.
如果您需要将下划线应用于浮动范围，则还需要将其明确应用于a:hover .more：
a:hover, a:hover .more { text-decoration: underline; }
答案 1 :(得分：1)
使用：
a:hover, a:hover .more {text-decoration:underline;}
答案 2 :(得分：0)
如何只定位跨度？
.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover, a:hover span {text-decoration:underline;}
答案 3 :(得分：-1)
这有用吗？
a:hover span.more{text-decoration:underline;}
答案 4 :(得分：-1)
为什么不把课程放在A链接上呢？
答案 5 :(得分：-1)
为什么不使用虚线边框底部更有趣。
.more {float:right;}
a:link {text-decoration:none;width:150px;display:block;}
a:hover, a:hover span {border-bottom:dotted 1px #000;}
答案 6 :(得分：-1)
.more{float:right;cursor:pointer/* for ie6 */;}
a{display:block;width:150px;text-decoration:none;}
a:hover,a:hover span{text-decoration:underline;}