CSS中的悬停图像无法正常工作

时间:2013-04-07 16:17:59

标签: html css

在导航栏上的http://www.elitedeafpoker.com/dev/index.html上,当我悬停(类)子菜单区域时,“PLAYERS”下面会有一个灰色指示图标,它不会显示白色指示符图标。 http://www.elitedeafpoker.com/dev/img/indicator-hover.png是在一个图像中显示两个图标的图像(您无法在其中看到白色图标)。

CSS

.nav-collapse_ .nav > li.sub-menu:after {
  position: absolute;
  top: 100px;
  left: 50%;
  display: block;
  margin-left: -4px;
  width: 8px;
  height: 3px;
  background: url(../img/indicator-hover.png) 0 0;
  content: '';
}
.nav-collapse_ .nav > li.sub-menu:hover {
  background: url(../img/indicator-hover.png) 0 -10px;
  }

HTML

<div class="nav-collapse nav-collapse_ collapse">
    <ul class="nav sf-menu clearfix">
        <li class="sub-menu"><a href="poker-players.html">PLAYERS</a>
            <ul>
                <li><a href="poker-players.html">EDPS PLAYERS</a></li>
                <li><a href="poker-players.html#">PLAYERS OF THE MONTH</a></li>
                <li><a href="poker-players.html#">PLAYERS OF THE YEAR</a></li>
            </ul>
    </li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="news-events.html">NEWS &amp; EVENTS</a></li>
    <li><a href="founders.html">FOUNDERS</a></li>
    <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

我相信你的

.nav-collapse_ .nav > li.sub-menu:hover

应改为

.nav-collapse_ .nav > li.sub-menu:hover:after

解决此问题