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 中看到的,由于某种原因,当您将光标悬停在框外时,它会消失......我认为这与宽度有关,有什么想法吗?
最佳答案
那是因为你的内部 div,即带有类包装器的 div 的宽度只有父级 div(即带有淡入淡出类的 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>
关于CSS3 包装器在框外淡入/淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15385592/