将CSS3转换添加到子对象

Question

所以我有一个-标签，里面有一个div。这个div有一个悬停时出现的背景图像。我想为这种影响添加一个过渡，尽管我无法让它发挥作用。

HTML

<a class="thumbs">
  <div class="thumbsText">
    Some text
  </div>
</a>

CSS：

.thumbsText{
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  -ms-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}
.thumbs a:hover .thumbsText{
  background-image: url(images/shadow.png);
}

Answer 1

不能向background-image添加转换。但是，您可以将背景图像设置为:before伪元素，并转换该元素的不透明度：

.thumbsText {
    position: relative;
}
.thumbsText:before{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    background-image: url(http://placekitten.com/150/150);    
    bottom: 0;
    content: ' ';
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.thumbs:hover .thumbsText::before{
    opacity: 1;
}

<a class="thumbs">
   <div class="thumbsText">
      Some text
   </div>
</a>

此外，您的选择器也不完全正确。您正试图使用规则（.thumb a:hover）在.thumb中选择一个链接，而这些是相同的元素。我从选择器中删除了a。