html - 李 :hover won't change sprite position

Question

我有一个 li 附加到 javascript 的 id 和 css 的类。 css 没有改变 li:hover 上的图像。我错过了什么吗？任何帮助深表感谢!抱歉，如果显示不正确，我就没法发帖了。

  HTML
  <div id="navlist">
    <ul>
    <li id="asteriskChecking" class="asteriskChecking"></li>
    <li id="plusChecking" class="plusChecking"></li>
    </ul>
  </div>

CSS
.asteriskChecking {background:url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 0px 0px;}
.asteriskChecking li:hover{background: url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 0px -50px;}

.plusChecking {background:url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 203px 0px;}
.plusChecking li:hover{background: url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 203px -50px;}

Answer 1

您正在 .asteriskChecking 上应用图像，但 asteriskChecking li 元素上的不同位置..(不存在 )

使用.plusChecking:hover 和.asteriskChecking:hover

您也不需要重新应用图像..只需改变位置..

.asteriskChecking {
    background:url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 0px 0px;
}
.asteriskChecking:hover{
    background-position: 0px -50px;
}

.plusChecking {
    background:url('http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/Buttons.png') 203px 0px;
}
.plusChecking:hover{
    background-position: 203px -50px;
}