文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >触发悬浮通过div

问触发悬浮通过div
EN

Stack Overflow用户
提问于 2017-03-15 18:28:03
回答 2查看 1.1K关注 0票数 0

我想为我的网站做一个特定的背景，包括9列，其中有一个动画，改变他们的背景颜色，并暂停悬停为动画。

是否有可能保持悬停效果发生时，我将悬停在背景中的一个？

另外，css3动画很难显示给客户端吗？如果我想拥有比这个背景更多的东西，比如在svg上运行一些动画，我应该已经开始“保存”内存了吗？

谢谢你的帮助

参见这里的示例jsfiddle：https://jsfiddle.net/gxzhry0x/

代码语言：javascript
复制
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 }
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-15 18:57:58

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

然而，pointer-events: none的问题是，您希望事件“通过”发生的元素需要一个绝对位置。虽然这是一个很好的解决方案，但看看这是否能为您提供一个解决方案：

​

代码语言：javascript
复制
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;}
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-03-15 18:58:32

是否有可能保持悬停效果发生时，我将悬停在背景中的一个？

是的，如果div位于柱子外面。

下面的片段：

​

代码语言：javascript
复制
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;
  }
}
代码语言：javascript
复制
<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>

​

另外，css3动画很难显示给客户端吗？如果我想拥有比这个背景更多的东西，比如在svg上运行一些动画，我应该已经开始“保存”内存了吗？

它确实取决于所需的动画和项目优先级，但是的，有些动画可能会成为内存和CPU的霸主，并且可能会因所使用的浏览器而滞后。理想情况下，您应该在尽可能多的浏览器中测试它们，以确保所有浏览器的性能。添加的效果越多，消耗的资源越多，受滞后影响的几率就越高。

您还可以稍微研究一下变换性质，尽管它仅限于诸如旋转、缩放、移动、倾斜、平移、透视等属性，但您可能感兴趣的是，您可以显著减少CPU的使用，因为在大多数情况下，可以利用GPU加速，从而减轻CPU的负担。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42817879

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档