触发悬停在div

时间：2017-03-15 18:28:04

标签： css html5 css3

我想为我的网站制作一个特定的背景，其中包含9个列，这些列的动画会更改其背景颜色，并且会在动画时将鼠标悬停暂停。

当我将鼠标悬停在背景中的div上时，是否可以保持悬停效果？

另外，css3动画难以为客户展示吗？如果我想拥有更多这样的背景，比如在svg上运行的几个动画，我应该开始＆＃34;保存＆＃34;记忆已经？

感谢您的帮助

请参阅示例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 }

2 个答案:

答案 0 :(得分：2)

您正在寻找的是属性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>

答案 1 :(得分：1)

  

当我将鼠标悬停在背景中的div上时，是否可以保持悬停效果？

是的，如果div位于支柱之外。

以下代码段：

＆＃13;
＆＃13; 
h1 {
  background-color: #FFFFFF;
}

.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;
}

.above {
  border: 1px solid gray;
  background: white;
  padding: 10px;
}

.above:hover {
  background: lightgray;
}

.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;
  }
}
＆＃13; 
<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>
  <div class="above">div above</div>
</body>
＆＃13;
＆＃13;
＆＃13;

  

另外，css3动画难以为客户展示吗？如果我想拥有更多这样的背景，比如在svg上运行的几个动画，我应该开始＆＃34;保存＆＃34;记忆已经？

这实际上取决于所需的动画和项目的优先事项，但有些动画可能会成为记忆和CPU占用并可能滞后，具体取决于所使用的浏览器。理想情况下，您可以在尽可能多的浏览器中测试它们，以确保所有浏览器的性能。您添加的效果越多，消耗的资源越多，遭受延迟峰值的可能性就越大。

您还可以稍微研究一下transform property，虽然仅限于旋转，缩放，移动，倾斜，平移，透视等属性，但您可能会对显着降低CPU使用率感兴趣在大多数情况下，利用GPU加速，减轻CPU的负担。

相关问题
最新问题