增加精灵图像的悬停区域

Question

更新这是带有图像和悬停事件的 jsFiddle。

我有一张包含 4 张 "button" 图片的精灵图片，每张 30px x 60px - 所以图片总大小为 60px x 120px。 css 中的每个按钮都使用其适当的背景偏移显示，如下所示。

我想增加每个按钮的可点击区域，但如果我增加图像的填充，图像将显示比定义的宽度和高度包含的更多的区域。我可以增加内边距或使用其他方法使图像的高度和宽度仍然受到限制吗？

我确实有一个包含 a 的标签。我可以通过填充 a 标签来增加按钮的点击区域，但我仍然需要通过 img 悬停反馈鼠标在可点击区域。

img.prev{
    background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
    width: 30px;
    height: 60px;
}

img.prev:hover{
    background-position: 0px -60px;
}

img.next{
    background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
    width: 30px;
    height: 60px;
}

img.next:hover{
    background-position: -30px -60px;
}

Answer 1

好的 - 我想我已经找到答案了。看来我可以增加包含 a 标签的填充来增加点击区域，然后使用 a 标签的悬停事件来设置 img 的背景。以下 css 用于包含 a 标签。

如果有更好的或其他解决方案，请告诉我。

#a-next{
    padding-left: 30px;
    padding-bottom: 200px;
}

#a-prev{
    padding-right: 30px;
    padding-bottom: 200px;
}

#a-next:hover > img{
     background-position: -30px -60px;   
}

#a-prev:hover > img{
    background-position: 0px -60px;
}

Answer 2

伪装就可以了。 https://jsfiddle.net/mgggf5vo/6/

从 link 捕获悬停，因此它包含伪区域。

link 的正确属性是 title，而不是 alt。

a {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
  content: '';
  position: absolute;
  height: 60px;
  width: 50px;
  margin-left: 29px;
}
a[title="next"]:before {
  right: 29px;
}
img.prev {
  background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
  width: 30px;
  height: 60px;
  padding: 0;
}
a:hover img.prev {
  background-position: 0px -60px;
}
img.next {
  background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
  width: 30px;
  height: 60px;
  padding: 0;
}
a:hover img.next {
  background-position: -30px -60px;
}

<div>
  <a title="prev">
    <img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
  </a>
  Something Here
  <a title="next">
    <img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
  </a>
</div>

增加精灵图像的悬停区域

Increasing the hover area of an image for a sprite

css

image

sprite

hover