Question

我担心如果我试图包含所有相关细节，我会把所有人都淹没在代码中，所以为了简单起见，我做了这个，这样你就可以了解我想要的东西。做：

编辑：

以及实际使用的代码：

.box-4 .box-subtitle {
    position:absolute;
    display:block;
    border-radius:0 4px 0 0px;
    -moz-border-radius:0 4px 0 0px;
    -webkit-border-radius:0 4px 0 0px;
    background:#403f3f;
    height:60px;
    width:199px;
    padding: 11px 23px 0 12px;
    max-height: 1000px;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}


.box-4:hover .box-subtitle {
    background:url(images/bg-box.gif) 0 0 repeat;

}

.box-subtitle span {
    font-size:15px;
    line-height:23px;
    color:#fff;
    text-transform:uppercase;
    font-family: 'Maven Pro', sans-serif;
    font-weight:700;
    background:url(images/bg-subtitle.png) 0 2px no-repeat;
    padding:0 0 0 32px;
    display:inline-block;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle span {
    color:#a6e7f0;
    background:url(images/bg-subtitle1.png) 0 2px no-repeat;

}

我想要发生的事情是，当您将鼠标悬停在较大的框上时，该div中包含的div和span应该在单独的属性更改中淡出。

显而易见的问题是，＆＃34;这甚至可能吗？＆＃34;我知道过渡是相对较新的，可能还有一些错误，但是如果有办法做到这一点，我非常感激，即使它没有通过这种方法，如果你可以启发我至于如何实施它。

修改

好吧，我设法让<span>使用transition: background 1s ease, color 1s ease;以正确的方式淡出，因为这些是我想要改变的唯一属性。背景仍然是一个挑战，因为我刚刚发现background-image还不是转换支持的属性。虽然我使用的是background: url(URL) 0 0 repeat;，但它本质上仍然是一张背景图片，我觉得它给我带来了麻烦。有没有人知道任何背景图像褪色的解决方法？（不透明度不起作用，因为它淡出整个div而不是仅仅改变背景）我已经想过将一个普通状态div嵌套在悬停状态div之上，并使鼠标悬停时正常状态div的不透明度转换掉。尽管如此，我还是无法解决这个问题。如果有人能够完成这样的壮举，那请诅咒我，蝙蝠侠。

更多编辑

这里是我的问题的更新jsfiddle，即使我把它们绝对定位在一个相对定位的包裹内的z-index，我也无法将div堆叠起来。我错过了什么吗？

http://jsfiddle.net/Ep2xa/1/

Answer 1

问题是您在悬停时没有更改opacity。

使用transition: background 0.5s ease;或悬停时设置opacity。

Answer 2

修改评论：

background-image无法根据规范转换：http://www.w3.org/TR/css3-transitions/#animatable-css

如果您可以使用略微改变的html，您可以使用绝对定位在图像上的另一个div，然后淡化该div的背景。你的html结构方式的问题，你必须知道背景图像div的确切高度，以便只覆盖那个而不是跨度。我也把范围移到了.content1：http://jsfiddle.net/LcsJL/8/

之外

原始回答

是。 .content1中没有跨度，因此请将此更改为.box:hover .content1 span至.box:hover span

Answer 3

我甚至不知道我做了什么，只是开始移动片段并删除一些东西，然后突然发生了魔法：

http://jsfiddle.net/LcsJL/9/

但是，非常感谢brouxhaha建议background:rgba转换，这确实有帮助。

使用CSS过渡淡入2个元素，同时将鼠标悬停在三分之一上

3 个答案: