Question

我试图通过以下方式增加按钮图像的宽度（比例）：悬停，但它不能在firefox上运行（但它适用于所有其他浏览器）。

HTML：

<div class="my_class">
    <button><img src="my_location.png" ></button>
</div>

CSS：

div.my_class button img:hover{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);

}

你看错了吗？

Answer 1

scale函数有两个值，一个用于x，一个用于y。如果要转换单个轴，则只需要一个参数。

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

<强>更新

将:hover移至button。此外，您应该将未加前缀的属性放在带前缀的属性之后。

＆＃13;

div.my_class button:hover img {
  -webkit-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -moz-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);  
}

＆＃13;

<div class="my_class">
  <button><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Britskorthaar-64091287828362D7bA.jpg/220px-Britskorthaar-64091287828362D7bA.jpg" ></button>
</div

＆＃13;

：将鼠标悬停在Firefox上的img上工作

1 个答案: