Question

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的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>

fiddle

Answer 2

默认情况下，div是块级别，因此它将占用所有可用宽度。您正在应用转换到.fade课程，但似乎您只希望#wrapper本身褪色。

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

Answer 3

我已更新代码，

你的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>

CSS3包装器在盒子外面淡入/淡出

3 个答案: