在悬停足够长的时间后使 CSS 过渡淡出

Question

我正在为网站主页制作幻灯片。我使用 CSS 构建了当幻灯片悬停时出现的箭头按钮。但我认为很酷的一个功能是能够在一段时间后鼠标消失，按钮消失。我对使用 JS 或 CSS 的答案很好。这是我的代码：

.master {
	display: none;
	width: 100vw;
}

.mcont {
	background-image: url("../Pictures/magtrans.jpg");
	padding: auto;
	text-align: center;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.hover {
	height: 100vh;
}

.mtext {
	color: #ffffff;
	display: table;
	background-color: rgba(0, 0, 0, 0.5);
	margin: auto;
	padding: 3vw;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
}

.mtext h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 1vh;
	font-size: 5vh;
}

.mtext p {
	padding: 0;
	margin: 0;
	padding-bottom: 2.5vh;
	font-weight: bold;
	font-size: 2vh;
}

.mtext button {
	background-color: #5555ff;
	border: none;
	color: #ffffff;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: background-color 2s;
	transition: background-color 2s;
}

.mtext button:hover {
	background-color: #55aaff;
}

.leftc, .rightc {
	border-radius: 50%;
	width: 5vw;
	height: 5vw;
	background-color: rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	border: none;
	cursor: pointer;
	outline: none;
	color: #ffffff;
	font-size: 3vw;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.hover:hover > .leftc {
	opacity: 1.0;
}

.hover:hover > .rightc {
	opacity: 1.0;
}

.leftc {
	left: 1vw;
}

.rightc {
	right: 1vw;
}

<div class='mcont'>
  <img class='master' src='Media/Pictures/magtrans.jpg'/>
	<div class='hover'>
		<button class='leftc'><</button>
		<button class='rightc'>></button>
		<div class='mtext'>
			<h1>Slideshow</h1>
			<p>Buttons to left and right!</p>
			<button>Learn More</button>
		</div>
	</div>
</div>

我需要的是类似于 Google 幻灯片中的内容，其中光标和工具栏会在几秒钟后消失，并在鼠标移动时返回。我对 CSS 过渡和动画进行了广泛的研究。动画 cursor 可以，但 cursor 不可动画。

Answer 1

理论

CSS 状态（可用于根据元素状态设置样式 - 因此基于用户交互）是：

:hover         :active        :focus         :target        :link

为此，您可以添加验证伪类

:checked       :valid         :invalid       :default       :disabled
:empty         :enabled       :optional      :in-range      :out-of-range
:read-only     :read-write    :required      :indeterminate 

您还有结构伪类（:nth-*、:first-*、:last-*），一些实验性的和杂项：

:scope         :dir           :lang          :root          :fullscreen

...当然还有伪元素 (:before & :after)。

如果您想要任何不能简化为上述组合的东西，那么您就处于 JavaScript 领域，因为您希望根据用户交互进行 DOM 修改，而不是原生（以上）交互。另请注意，并非所有浏览器都实现了上述所有内容。

您的请求仅使用 CSS 是不可行的，因为您希望根据鼠标是否移过过去 Nms 以不同方式显示 :hover 状态。

实践（JS方案）

最简单的解决方案是在父级上存在特定类 (active) 时显示箭头。在mousemove 事件上将该类添加到父类，并按所需的时间间隔去抖动函数的执行（删除类）。如果在去抖动期间发生mousemove，则取消去抖动函数并创建它的全新实例。在下面的示例中，去抖动间隔为1s：

let deactivate = debounce(function() {
  document.querySelector('.mcont').classList.remove('active');
}),
 activate = function() {
  document.querySelector('.mcont').classList.add('active');
  deactivate();
} 


function debounce(func, wait = 1000) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

测试：

let deactivate = debounce(function() {
  document.querySelector('.mcont').classList.remove('active');
}),
 activate = function() {
  document.querySelector('.mcont').classList.add('active');
  deactivate();
} 


function debounce(func, wait = 1000) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

.master {
	display: none;
	width: 100vw;
}

.mcont {
	padding: auto;
	text-align: center;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.hover {
	height: 100vh;
}

.mtext {
	color: #ffffff;
	display: table;
	background-color: rgba(0, 0, 0, 0.5);
	margin: auto;
	padding: 3vw;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
}

.mtext h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 1vh;
	font-size: 5vh;
}

.mtext p {
	padding: 0;
	margin: 0;
	padding-bottom: 2.5vh;
	font-weight: bold;
	font-size: 2vh;
}

.mtext button {
	background-color: #5555ff;
	border: none;
	color: #ffffff;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: background-color 2s;
	transition: background-color 2s;
}

.mtext button:hover {
	background-color: #55aaff;
}

.leftc, .rightc {
	border-radius: 50%;
	width: 5vw;
	height: 5vw;
	background-color: rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	border: none;
	cursor: pointer;
	outline: none;
	color: #ffffff;
	font-size: 3vw;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.active .hover > .leftc {
	opacity: 1.0;
}

.active .hover > .rightc {
	opacity: 1.0;
}

.leftc {
	left: 1vw;
}

.rightc {
	right: 1vw;
}
body {
  margin: 0;
  padding: 0;
}

<div class='mcont' onmousemove="activate()">
  <img class='master' src />
	<div class='hover'>
		<button class='leftc'>&lt;</button>
		<button class='rightc'>></button>
		<div class='mtext'>
			<h1>Slideshow</h1>
			<p>Buttons to left and right!</p>
			<button>Learn More</button>
		</div>
	</div>
</div>

注意：上述原版debounce() 的道具转到Vanilla debounce。如果您需要它们，您可以尝试更高级的版本：

• 带有 jQ​​uery 风格：https://github.com/cowboy/jquery-throttle-debounce
• lodash 的（具有 leading、trailing 和 maxWait 参数）。

Answer 2

我认为关键帧就足够了：

.hover:hover {
 animation-name: slideshowcursor;
 animation-duration: .5s;
 animation-delay: 2s; //that period
 animation-fill-mode: forwards
}
.hover:hover > .rightc, .hover:hover > .leftc {
 animation-name: slideshowarrows;
 animation-duration: .5s;
 animation-delay: 2s; //that period
 animation-fill-mode: forwards
}
@keyframes slideshowcursor {
 0% {
  height: 100vh;
 }
 100% {
  cursor: none;
 }
 }

@keyframes slideshowarrows {
 0% {
  border-radius: 50%;
width: 5vw;
height: 5vw;
background-color: rgba(0, 0, 0, 0.5);
vertical-align: middle;
border: none;
cursor: pointer;
outline: none;
color: #ffffff;
font-size: 3vw;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: helvetica, arial, sans-serif;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
 }
 100% {
  display: none;
 }
 }

注意：我现在在手机上，所以我的测试是有限的，但理论上应该可以工作。