如何只淡入/淡出div,而不淡入div中的文字?
这是我的代码:https : //jsfiddle.net/tc6fq235/3/
<div class="fade">Hover over me.</div>
.fade {
background-color: antiquewhite;
width: 300px;
height: 200px;
text-align: center;
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;
}
通过使div褪色,您将使其中的文本褪色,因为文本是div的一部分。如果只想淡化背景颜色(div的唯一其他可见部分,而不是文本),则可以使用alpha透明度。
.fade {
background-color: antiquewhite;
width: 300px;
height: 200px;
text-align: center;
transition: background-color .25s ease-in-out;
}
.fade:hover {
background-color: rgba(250,235,215,0.5);
}
<div class="fade">Hover over me.</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句