2

我的页面：

按钮

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

我还需要插入符号距顶部 9 像素，距左侧 4 像素，并且如果可能的话，它是不可选择的。

我的页面可以在这里找到

编辑：刚刚制作了 一个JSFiddle 。

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

请不要说我已经选择像这样对字体类型下拉菜单进行下拉以显示字体的预览，其中暂时无法正常工作，但我知道问题并试图首先解决这个问题，因为见上。

为大卫弗雷戈里编辑

#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 也没有显示任何内容。

更新：感谢David Fregoli ， 查看更新的JSFiddle。现在剩下要回答的是如何让插入符号距顶部 9 像素和距左侧 4 像素，并且在下拉菜单打开时处于活动状态以保持活动状态。

4

1 回答 1

3

你只需要 CSS 伪选择器

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

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

于 2013-03-29T13:15:36.683 回答