将 CSS3-transition 添加到子对象答案

【问题标题】：Add CSS3-transition to child object将 CSS3-transition 添加到子对象
【发布时间】：2014-11-16 13:10:31
【问题描述】：

所以我有一个-tag，里面是一个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);
}

【问题讨论】：

background-image 不是可转换或动画属性。您将不得不使用其他东西。 hover 的选择器也是错误的，因为 thumbs 类在 a 上。
啊好吧！没有 jQuery 可以做到这一点？找到这个：stackoverflow.com/questions/17825194/fade-in-background-jquery
我不太喜欢 jQuery mate，所以不能对此发表太多评论。也许您可以将 jQuery 标记添加到问题中，然后查看响应。
@CarlPapworth 可能重复：stackoverflow.com/questions/9483364/… - 请在下次询问之前使用搜索。
@easwee 欢呼，一时冲动：D

标签： css hover background-image css-transitions

【解决方案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。

【讨论】：

酷，我试试看！不，那是真的，在我的原始代码中，<a> 在 div.thumb 内，我只是在这里打印出错误的示例 html :) 感谢您的帮助！