Question

我有一个新闻项目，其中包含我在div上设置样式的图像。我把它设置为在悬停时减少但是css动画不起作用。

在我已添加的div类中

  background-size: 100%;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

并在：hover中添加了

background-size: 110% !important;

这是一个小提琴https://jsfiddle.net/atzgL43v/3/

奇怪的是，在divs样式中设置为

style="background-size: cover; background: url('http://i.imgur.com/ppEjVyF.jpg');

但封面不适用于风格，除非我添加！重要，否则图片不会调整大小。不知道为什么这不起作用。

Answer 1

我有一个解决方法是摆脱所有背景大小的属性，并设置：hover与以下内容。

.news-tile-img-post:hover {
  -ms-transform: scale(1.1); /* IE 9 */
   -webkit-transform: scale(1.1); /* Safari */
   transform: scale(1.1); /* Standard syntax */
}

这样就可以使转换工作，而不必在css中使用！important。

Answer 2

据我所知，转换不支持background-size属性。

请参阅here

CSS转换不适用于悬停

2 个答案: