防止背景图像缩放

Question

我正在创建一个带有自定义“上一个/下一个”导航箭头的滑块。 所有的动画都可以正常工作。我在悬停时使用transform: scale() 放大箭头，一切正常。我只有一个问题..

我也想阻止箭头图像缩放。

我想我已经尝试了所有方法：我使用了某种 :before/:after （见下文），效果非常好。但不是在 Safari （悬停时没有过渡）。

http://jsfiddle.net/XF4Qj/5/

---

然后我尝试了其他方法：在箭头容器内放一个 span，当箭头容器放大时，span 缩小了，但看起来一点也不好看（见下文） em>。

http://jsfiddle.net/Ajngc/1/

---

我已经尝试了几个小时，但我无法让它在所有主流浏览器中运行。

所以问题是：如何防止箭头图像也缩放，并且只保留它们的原始尺寸？

应该放大的只是白色圆圈，不是背景图片。

我创建了第三个小提琴，其中包含来自我的滑块箭头功能的所有工作代码：

http://jsfiddle.net/Ajngc/2/

如果有人可以帮助我，那就太好了。

非常感谢 - 杰斯珀

Answer 1

而不是transform()ing 这些元素，为什么不直接改变大小呢？看到这个updated fiddle。

.arrow:hover {
    width: 50px;
    height: 50px;
    top: -5px;
    bottom: -5px;
}

.prev:hover {
    left: 35px;
}

.next:hover {
    right: 35px;
}