Question

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

我有一个精灵图像包含4个“按钮”图像，每个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/

从链接中捕获悬停，因此它包含伪区域。

链接的正确属性为title，而不是alt。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

增加精灵图像的悬停区域

2 个答案: