Question

所以我有一个-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);
}

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

将CSS3转换添加到子对象

1 个答案: