如何在悬停时只显示部分图像？

Question

在这个小提琴中http://jsfiddle.net/36Fmh/36/我用图片覆盖图像：

图像包含两种状态：非悬停状态和悬停状态：

如何更新css以便只显示悬停状态？

我可以使用jQuery在悬停时将css更新为所需的状态，但我不确定css应该是什么。我想我需要更改background-position属性？

小提琴＆amp;代码：

http://jsfiddle.net/36Fmh/36/

.qp_divSelect {
      cursor: pointer;
      width: 960px;
      height: 240px;
      background: url('http://i.imgur.com/83LeFIa.png') no - repeat;
      background - position: 0px - 25px;
      display: inline - block;
  }

 <div id="testId">

    <span class="qp_divSelect" style="color: #408800;" href="javascript:void(0)" onclick="alert('here')">

    <span style="position: absolute;font-weight: bold;color: white;padding-left: 22px;padding-top: 10px;font-size: 13px;top: -0px;padding-left: 22px;">Add</span>

    </span>
</div>

Answer 1

使用：悬停伪选择器。

.qp_divSelect:hover {
cursor: pointer;
width: 960px;
height: 240px;
background: url('http://i.imgur.com/hoveres-background.png') no-repeat;
 background-position: 0px -25px;
display: inline-block;
}

这里没有jQuery的需求。

Answer 2

您必须在伪类background-position上更改:hover。

.qp_divSelect:hover {
 background-position: 0 0;
}

这里是我的小提琴：http://jsfiddle.net/36Fmh/37/（我必须调整div的宽度和高度）。

修改

我想我误解了你的问题。您是否可以将精灵应用于内部span？

例如：http://jsfiddle.net/36Fmh/38/