我有一个弹出式菜单,在“快速链接”末尾,我使用:first LI标签上的:after伪元素来显示来自精灵文件的图标。
HTML代码:
CSS:
应该发生的是,当你悬停在LI标签上时,我会将图标更改为活动颜色。
.rs-quick-links-nav>li:hover:after 在Firefox、Chrome和Safari中似乎有效,但在IE8中不起作用(我不关心IE8之前的任何版本)。根据QuirksMode的说法,IE8应该支持:hover和:after,所以我不确定为什么.rs-quick-links-nav>li:hover:after不起作用。有人有什么想法可以使其工作吗(即使我必须在Javascript中执行某些操作)。
编辑:DOCTYPE是HTML5 doctype。
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 & Favorites</a></li>
<li><a href="#">Cooking Tips & Techniques</a></li>
<li><a href="#">Shopping & Storing</a></li>
<li><a href="#">Tools & 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>li:hover:after 在Firefox、Chrome和Safari中似乎有效,但在IE8中不起作用(我不关心IE8之前的任何版本)。根据QuirksMode的说法,IE8应该支持:hover和:after,所以我不确定为什么.rs-quick-links-nav>li:hover:after不起作用。有人有什么想法可以使其工作吗(即使我必须在Javascript中执行某些操作)。
编辑:DOCTYPE是HTML5 doctype。
<!DOCTYPE html>
编辑:这里有JSFiddle片段http://jsfiddle.net/tangst/hA7FH/