html - 通过 div 触发悬停

Question

我想为我的网站制作一种特定类型的背景，该背景由 9 列组成，这些列具有更改背景颜色的动画，以及悬停动画时的暂停。

当我将 div 悬停在背景中的 divs 上方时，是否可以保持悬停效果发生？

另外，css3 动画是否难以为客户显示？如果我想要的不仅仅是这个背景，比如在 svg 上运行的一些动画，我应该已经开始“节省”内存了吗？

感谢帮助

请在此处查看示例 jsfiddle:https://jsfiddle.net/gxzhry0x/

html --

<div class="pillars-container">
    <div class="pillar" id="pillar1"></div>
    ...
    <div class="pillar" id="pillar9"></div>
</div>


css --

.pillars-container {
    position:fixed;
    top:0;
    left:0;
    z-index:-9000;
}

.pillars-container * {
    display:inline-block;

}

.pillar {
    opacity:0.8;
    margin:0 -4px -2px 0;
    padding:0;
    width:11vw;
    height:100vh;

    animation-name: pillars;
    animation-duration: 170s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.pillar:hover {

    opacity:0.7;
    animation-play-state: paused;
}

.pillar#pillar9{
    width:12vw;
}

@keyframes pillars { 
    0%      {background-color:#8F70FF;}
    2.5%    {background-color:#63C7E8;}
... etc }

Answer 1

您正在寻找的是属性 pointer-events: none，它允许所有鼠标事件通过一个元素。

然而，pointer-events: none 的问题在于，您希望事件“通过”发生的元素需要一个绝对位置。虽然这有点变通，但看看这是否可能是适合您的解决方案:

body {
}

h1 {
  background-color:#FFFFFF;
  position: absolute;
  pointer-events: none;
  width: 90%;
}

.pillars-container {
	position:fixed;
	top:0;
	left:0;
    z-index: 0;
}

.pillars-container * {
	display:inline-block;

}

.pillar {
	opacity:0.8;
	margin:0 -4px -2px 0;
	padding:0;
	width:11vw;
	height:100vh;

	animation-name: pillars;
	animation-duration: 170s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.pillar:hover {

	opacity:0.7;
	animation-play-state: paused;
}

.pillar#pillar9{
	width:12vw;
}

@keyframes pillars { 
	0% 		{background-color:#8F70FF;}
	2.5% 	{background-color:#63C7E8;}
	5% 		{background-color:#78FF96;}
	7.5% 	{background-color:#E8E759;}
	10% 	{background-color:#FFC360;}
	12.5% 	{background-color:#E8C26A;}
	15% 	{background-color:#E3FF8A;}
	17.5% 	{background-color:#74E8A5;}
	20% 	{background-color:#75C2FF;}
	22.5% 	{background-color:#53E85B;}
	25% 	{background-color:#E8A149;}
	27.5% 	{background-color:#FFF567;}
	30% 	{background-color:#E8BD42;}
	32.5% 	{background-color:#C0FF5F;}
	35% 	{background-color:#4CE8A3;}
	37.5% 	{background-color:#4A9AFF;}
	40% 	{background-color:#9875FF;}
	42.5% 	{background-color:#74C9E8;}
	45% 	{background-color:#8BFFA7;}
	47.5% 	{background-color:#E6E86A;}
	50% 	{background-color:#FFCB72;}
	52.5% 	{background-color:#FFDE5B;}
	55% 	{background-color:#91E855;}
	57.5% 	{background-color:#74FFD7;}
	60% 	{background-color:#5F87E8;}
	62.5% 	{background-color:#CF5FFF;}
	65% 	{background-color:#FF4DEA;}
	67.5% 	{background-color:#584FE8;}
	70% 	{background-color:#62F2FF;}
	72.5% 	{background-color:#45E84C;}
	75% 	{background-color:#FFF34A;}
	77.5% 	{background-color:#6FFF49;}
	80% 	{background-color:#44E8D3;}
	82.5% 	{background-color:#6178FF;}
	85% 	{background-color:#D24EE8;}
	87.5% 	{background-color:#FF6A4C;}
	90% 	{background-color:#FFAA35;}
	92.5% 	{background-color:#E84139;}
	95% 	{background-color:#B94BFF;}
	97.5% 	{background-color:#3076E8;}
	100% 	{background-color:#32FFB1;}
}

@-webkit-keyframes pillars {
	0% 		{background-color:#8F70FF;}
	2.5% 	{background-color:#63C7E8;}
	5% 		{background-color:#78FF96;}
	7.5% 	{background-color:#E8E759;}
	10% 	{background-color:#FFC360;}
	12.5% 	{background-color:#E8C26A;}
	15% 	{background-color:#E3FF8A;}
	17.5% 	{background-color:#74E8A5;}
	20% 	{background-color:#75C2FF;}
	22.5% 	{background-color:#53E85B;}
	25% 	{background-color:#E8A149;}
	27.5% 	{background-color:#FFF567;}
	30% 	{background-color:#E8BD42;}
	32.5% 	{background-color:#C0FF5F;}
	35% 	{background-color:#4CE8A3;}
	37.5% 	{background-color:#4A9AFF;}
	40% 	{background-color:#9875FF;}
	42.5% 	{background-color:#74C9E8;}
	45% 	{background-color:#8BFFA7;}
	47.5% 	{background-color:#E6E86A;}
	50% 	{background-color:#FFCB72;}
	52.5% 	{background-color:#FFDE5B;}
	55% 	{background-color:#91E855;}
	57.5% 	{background-color:#74FFD7;}
	60% 	{background-color:#5F87E8;}
	62.5% 	{background-color:#CF5FFF;}
	65% 	{background-color:#FF4DEA;}
	67.5% 	{background-color:#584FE8;}
	70% 	{background-color:#62F2FF;}
	72.5% 	{background-color:#45E84C;}
	75% 	{background-color:#FFF34A;}
	77.5% 	{background-color:#6FFF49;}
	80% 	{background-color:#44E8D3;}
	82.5% 	{background-color:#6178FF;}
	85% 	{background-color:#D24EE8;}
	87.5% 	{background-color:#FF6A4C;}
	90% 	{background-color:#FFAA35;}
	92.5% 	{background-color:#E84139;}
	95% 	{background-color:#B94BFF;}
	97.5% 	{background-color:#3076E8;}
	100% 	{background-color:#32FFB1;}
}

<body>
	<div class="pillars-container">
		<div class="pillar" id="pillar1"></div>
		<div class="pillar" id="pillar2"></div>
		<div class="pillar" id="pillar3"></div>
		<div class="pillar" id="pillar4"></div>
		<div class="pillar" id="pillar5"></div>
		<div class="pillar" id="pillar6"></div>
		<div class="pillar" id="pillar7"></div>
		<div class="pillar" id="pillar8"></div>
		<div class="pillar" id="pillar9"></div>
	</div>
	<div>
		<h1 class="title" style="background-color: white;">hello ervyone</h1>
	</div>


</body>