防止缩放背景图像

Question

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

我想阻止箭头图像缩放。

我想我已经尝试了一切：我曾经使用过某种方式：在/ em之后（见下文）并且效果非常好。但不是在Safari 中（悬停时无转换）。

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

---

然后我尝试了其他的东西：在箭头容器内放置一个跨度，当箭头容器按比例放大时，跨度缩小，但它看起来并不好（见下文）

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

---

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

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

只有白色圆圈可以放大，不背景图像。

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

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

如果有人可以帮助我，那真的很棒。

非常感谢你 - Jesper

Answer 1

为什么不改变大小，而不是transform()这些元素？请参阅此updated fiddle。

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

.prev:hover {
    left: 35px;
}

.next:hover {
    right: 35px;
}