Question

我有一个弹出菜单，在“快速链接”的末尾，我使用第一个LI标记上的：after伪元素来显示精灵文件中的图标。

HTML：

<ul class="rs-quick-links-nav">
   <li>
    <a href="#">QUICK LINKS</a>
    <ul>
     <li><a href="#">Enhanced Recipe Search</a></li>
     <li><a href="#">Recipe Collections &amp; Favorites</a></li>
     <li><a href="#">Cooking Tips &amp; Techniques</a></li>
     <li><a href="#">Shopping &amp; Storing</a></li>
     <li><a href="#">Tools &amp; Products</a></li>
     <li><a href="#">New Uses for Old Things</a></li>
     <li><a href="#">Guide to Ingredients</a></li>
    </ul>
  </li>
</ul>

CSS：

.rs-quick-links-nav { position: absolute; top: 0; right: 20px; }
.rs-quick-links-nav > li { float: left; position: relative; white-space: nowrap; height: 19px; padding: 4px 0 4px 0; }
.rs-quick-links-nav > li > a { color: #999999; display: block; font: normal 1.2em Arial, sans-serif; }
.rs-quick-links-nav > li:after { content: ' '; background: transparent url('@static.base@/i/rs-global-sprite.png') -220px 0 no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav > li > a:hover { text-decoration: none; }
.rs-quick-links-nav > li:hover:after { content: ' '; background: transparent url('global-sprite.png') -220px -20px no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav li ul { background-color: #FFFFFF; border: 4px solid #69b8b8; left: -9999px; padding: 2px 8px; position: absolute; top: 24px; visibility: hidden; z-index: 9900; }
.rs-quick-links-nav li:hover ul { left: auto; right: -18px; visibility: visible; }
.rs-quick-links-nav li li { padding: 2px 0; }
.rs-quick-links-nav li li + li { border-top: 1px dotted #333333; }
.rs-quick-links-nav li li a { color: #666666; display: block; font: normal 1.2em/30px Arial, Verdana, sans-serif; height: 30px; padding: 0px 8px; }
.rs-quick-links-nav li li a:hover { background: #f6f6f6; }

应该发生的是，当您将鼠标悬停在LI标签上时，我会将图标更改为活动颜色。

.rs-quick-links-nav＆gt; li：悬停：之后似乎在Firefox，Chrome和Safari中工作，但不是IE8（IE8之前我什么都不关心）。根据QuirksMode，IE8据说支持：hover和：之后，所以我不确定为什么.rs-quick-links-nav＆gt;李：悬停：以后不起作用。有没有人有任何想法如何使这项工作（即使我必须在Javascript中做一些事情）。

编辑：DOCTYPE是HTML5文档类型。

<!DOCTYPE html>

编辑：JSFiddle片段在这里 http://jsfiddle.net/tangst/hA7FH/

Answer 1

在:after:hover规则中添加content:"";。这将强制重绘

Answer 2

您的doctype是什么样的？

IE8确实处理伪选择器但是如果你没有严格的doctype：hover选择器只能用于锚点。

Answer 3

有几个不错的选择：

使用垫片。这可以让你适应（由于css的级联性质）并修复“旧浏览器缺乏支持”的问题。例如：http://selectivizr.com/
使用jQuery 1.8.1+为旧浏览器提供这类服务的支持。

Answer 4

最后，我必须编写一些Javascript来控制该元素的悬停事件并以这种方式设置元素的样式。它在IE8中并不完美，但它确实有效。

是：悬停：IE8支持后？

4 个答案: