CSS3 Wrapper 在框外淡入/淡出

Question

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 中看到的那样，由于某种原因，当您将光标悬停在框外时它会逐渐消失...我认为这与宽度有关，有什么想法吗？

Answer 1

那是因为你的内部 div，即带有类包装器的 div 的宽度仅为父 div，即带有类 fade 的 div 的宽度的 70%。

并且您已经应用了不透明度 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>

fiddle