Question

我有一个附加到javascript的id和css类的li。 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;
}

Answer 2

选择器.asteriskChecking li:hover表示＆＃34;一个li标记，悬挂在类asteriskChecking＆＃34;的元素内。

您有一个li元素类asteriskChecking，而不在其中。所以，你的选择器应该是：

li.asteriskChecking:hover { /* your definitions */ }

li：hover不会改变精灵位置

2 个答案: