如何解决jQuery和CSS问题？

Question

我的页面：

从左到右是为了; 正常，悬停和活动。我正在使用jQuery下拉功能，而我希望正常图像显示鼠标未结束或处于活动状态时，悬停图像显示在您悬停时，活动图像显示何时单击并显示下拉出现。

我还需要插入符号从顶部开始是9px，从左边开始是4px，如果可能的话，它是不可选择的。

我的页面可以是found here

修改 刚刚制作了JSFiddle。

<div id="Font-Type">
    <div class="dropdown">
        Arial <a href="#Font-Type" class="dropdown-toggle">▼</a>
        <ul class="dropdown-menu">
            <li class="Arial">Arial</li>
            <li>Monospace</li>
            <li>Cursive</li>
            <li>Fantasy</li>
        </ul>
    </div>
</div>

请不要我已经选择像这样下拉字体类型下拉以显示字体的预览，其中暂时不起作用但我知道问题并且我正在尝试整理这个首先，如上所示。

编辑David Fregoli

#Font-Size {
    width:14px;
    height:22px;
    cursor:pointer;
    font-size:8px;
}
#Font-Size.img {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 0;
}
#Font-Size.img:hover {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 14;
}

以下CSS没有显示任何内容，即使我例如指定“左上角”。

更新 通过JSFiddle查看更新的David Fregoli。现在剩下要回答的是如何让插入符号从顶部开始是9px，从左边开始是4px，并且当下拉开启时，活动状态保持活动状态。

Answer 1

您只需要CSS伪选择器

a.img {
   background-image: //img1
}
a.img:hover {
   background-image: //img2
}
a.img:active {
   background-image: //img3
}

编辑，因为您似乎只有一个精灵而不是设置背景图像，您需要设置背景位置属性