Css 错误消息以背景色淡入_Css

Css 错误消息以背景色淡入

css

Css 错误消息以背景色淡入,css,Css,不确定是否可以使用纯CSS3 谷歌搜索答案，但他们有悬停的答案，我不需要表单将不会显示错误，直到用户单击带有空字段的按钮，然后它将在错误消息中以背景色淡入（从浅色变为原色）没有JQuery有什么简单的方法可以做到这一点吗 <div class="msg"> <g:if test="${flash.error}"> <div class="error">${flash.error}</div> </g

不确定是否可以使用纯CSS3

谷歌搜索答案，但他们有悬停的答案，我不需要

表单将不会显示错误，直到用户单击带有空字段的按钮，然后它将在错误消息中以背景色淡入（从浅色变为原色）

没有JQuery有什么简单的方法可以做到这一点吗

<div class="msg">
      <g:if test="${flash.error}">
        <div class="error">${flash.error}</div>
      </g:if>
      </div>

当点击按钮和字段未填充时，他们一直试图使其淡出淡出。但是它的结果是“不自然的”（比如弹出）

在纯CSS中无法实现这一点。如果您试图完全避免JQuery，请参阅一个有趣的解决方案的相关问题，该解决方案修改CSS文件

如果使用绝对位置，您可以轻松更改z索引和不透明度，使其返回并淡出。这是通过javascript思想实现的，没有jQuery并不容易，相反，请参见

为了使转换工作，您必须有一个要从中转换的开始状态。它不是纯粹的CSS，但通过一些简单的Javascript，您可以在加载文档时通过更改错误消息元素的

className

属性来触发转换

示例HTML Javascript

您可以稍微不同地实现

showError

功能，以转换多个错误消息。这种方式只适用于一条消息。请注意，我已将错误消息的

位置设置为绝对
，以防止其他元素在出现时四处移动。您可以通过注释掉或删除错误元素来尝试这一点。
对用户输入做出反应通常是javascript的领域。您不需要使用jQuery，但它使它变得非常简单。你能把你的问题的一个例子发布在a）编辑你的问题或b）上吗？谢谢，但我没有看到任何背景褪色？好的。我以为你想要背景开始红色和淡出，这样你就可以阅读白色文本。您可以通过在.error
和.error.show之间交换背景色来轻松扭转这种局面。如果你看不到任何转变，我将不得不进一步研究。你用什么浏览器？@AustinMillins-谢谢，我交换了，但没有转换。我使用ChromeWebird，我也在Firefox和IE中试用过。它们都在JSFIDLE上显示转换。这意味着它必须以某种方式依赖于本地设置。总之，jQuery的动画功能很好地消除了所有这些差异。因此，jQuery是我的推荐。嗯，背景色不会在静止状态下褪色。我觉得有点不对劲。谢谢，但不透明度1将始终显示全彩。不透明度1是完全可见的，不透明度0是透明的（直到它不可见为止）
 .error{
  background-color: #ff9696;
  color: red;
  padding: 15px 0;
  transition: 2 opacity 2s 3s ease-in;
}

<body onload="showError();">
  <p class="error">Error!</p>

  <button class="error-button">Show Error</button>
</body>

.error{
  position:absolute;
  top:0px;
  height:20px;
  background:#ff9696;
  color:red;
}

.error.show {
  display:block;
  background:white;
  transition:background 1s ease-in;
}

.error-button {
  position:relative;
  margin-top:30px;
}

var showError = function() {
  var err = document.getElementsByClassName("error")[0];

  if(err)
  {
    err.className = "error show";
  }
};