Question

我正在尝试在页面加载时显示一条消息，这样可以正常工作，但是让我说我希望消息在悬停在身体上几秒后消失？这是我的代码，它加载消息但不会在悬停时隐藏它：

body::after {
  content: "Hello!" !important;
  vertical-align: middle !important;
  font-size: 2.1em !important;
  color: black !important;
  height: 50px !important;
  width: 100% !important;
  text-align: center !important;
  background: #FFF !important;
  position: fixed !important;
  bottom: -5px !important;
  opacity: 1 !important;
  display: visible !important;
  transition: opacity 1s ease-in-out, display 2s ease-in-out !important;
}

body:hover ~ body::after {
  opacity: 0 !important;
  display: none !important;
}

请不要使用其他编码语言提供替代方案;我只需要使用CSS。非常感谢你！

Answer 1

而不是使用body:hover ~ body::after，而是使用body:hover::after代替。

＆＃13;

body::after {
  content: "Hello!" !important;
  vertical-align: middle !important;
  font-size: 2.1em !important;
  color: black !important;
  height: 50px !important;
  width: 100% !important;
  text-align: center !important;
  background: #FFF !important;
  position: fixed !important;
  bottom: -5px !important;
  opacity: 1 !important;
  display: visible !important;
  transition: opacity 1s ease-in-out, display 2s ease-in-out !important;
}

body:hover::after {
  opacity: 0 !important;
  display: none !important;
}

＆＃13;

<body>
  I'm the body!
</body>

＆＃13;

我怎样才能在悬停在身体上之后隐藏身体::过渡？

1 个答案:

我怎样才能在悬停在身体​​上之后隐藏身体::过渡？

1 个答案:

我怎样才能在悬停在身体上之后隐藏身体::过渡？