如何仅使div而不是文本淡入淡出?

约翰

如何只淡入/淡出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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章