2

http://jsfiddle.net/Ru54p/

CCS3：

#wrapper {
    position: relative;
    width: 660px;
    max-width: 70%;
    background: #ccc;
    padding: 30px;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
}

.fade { 
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

html:

<div class="fade">
    <div id="wrapper">
            BLAH<BR>
            BLAH<BR>
            BLAH<BR>
    </div>
</div>

正如您在 jsfiddle 中看到的那样，由于某种原因，当您将光标悬停在框外时它会逐渐消失......我认为它与宽度有关，有什么想法吗？

4

3 回答 3

2

那是因为你的内部 div 即带有类包装器的 div 的宽度只有父 div 的 70%，即带有类淡入淡出的 div。

并且您已将不透明度 css 即 .fade 应用于父级

所以要么将内部 div 的宽度增加到 100%，即

#wrapper {
    position: relative;
    width: 660px;
    max-width: 100%;
    background: #ccc;
    padding: 30px;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    }

或在包装器上应用悬停属性，即在包装器上应用 .fade 类

<div >
     <div id="wrapper" class="fade">
         BLAH<BR>BLAH<BR>BLAH<BR>
    </div>
</div>

小提琴

于 2013-03-13T12:44:46.837 回答
0

Adiv默认是块级的，所以它会占用所有可用的宽度。您正在将您的过渡应用到.fade班级，但看起来您只希望#wrapper自己淡出。

尝试将背景颜色应用于.fade块以说明发生了什么。解决方法是将您的不透明度等添加到您的#wrapper中，或者在您的类上设置另一个属性fade以限制宽度（例如将其设置为display: inline-block;）。

于 2013-03-13T12:46:18.797 回答
0

我已经更新了代码，

你有错误的 div 序列，

检查这个小提琴http://jsfiddle.net/Ru54p/3/

我希望这会做:)

CSS

#wrapper {
    position: relative;
    width: 660px;
    max-width: 70%;
    background: #ccc;
    padding:0;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
}

.fade {
    width:100%; 
    height:100%; 
    padding:10px 10px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

HTML

<div style="background:#222">
    <br /><div id="wrapper">
    <div class="fade">
    BLAH<BR />BLAH<BR />BLAH<BR />
    </div></div>
    <br />
</div>
于 2013-03-13T12:47:55.820 回答