Question

这是jsfiddle：http://jsfiddle.net/kimimsc/LEjBR/

<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
    <div class="pullLeft portfolioVignette">
        <div class="portfolioVignetteFilter">
            <p>Test1</p>
        </div>
    </div>
</div>

#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5);  -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}

首先，如果你看看我提供的jsfiddle，你会看到我做了什么。

我有一个div（黄色），我正在使用css3过渡来设置另一个div（灰色，0.5 alpha）的宽度变化。悬停操作结束时，灰色div显示在悬停的黄色上方，并消失。您还可以看到始终显示文本元素“Test1”。

所以我想做的是当没有悬停时我想只有黄色元素而没有任何其他东西（所以没有文字也是如此）并且在悬停时我希望文本带有灰色元素。

我认为这不是正确的做法，但我找不到任何可以帮助我的方法。

如果我还不够清楚的话。告诉我你是否有任何问题。

感谢您的帮助，

Answer 1

这样的事情应该这样做：

.portfolioVignette p {
    width: 0;
    overflow: hidden;
    transition: width 0.5s ease-out;
}

.portfolioVignette:hover p {
    width: 100%;    
}

请在此处查看：http://jsfiddle.net/shomz/LEjBR/6/

Answer 2

我做了类似的事情，但解释你的问题有点不同：

.portfolioVignette p {
 width:0;
 margin-left:0;
 overflow: hidden;
 transition: width .5s ease-out;
 transition: margin-left .5s ease-out;
}

.portfolioVignette:hover p {
 width:100%;
 margin-left:90%;
}

使用CSS3或JS中的div动画为div内容添加动画效果

2 个答案: