Html 重叠div上的悬停事件不起作用
我试图通过旋转重叠的div来制作一个饼图。我需要对鼠标悬停或悬停采取行动。如果第一个和最后一个切片的总和为180度或大于180度，则每件事情都正常工作。 但当总和低于此值时，它将停止执行悬停事件。 请访问Html 重叠div上的悬停事件不起作用,html,css,pie-chart,Html,Css,Pie Chart,我试图通过旋转重叠的div来制作一个饼图。我需要对鼠标悬停或悬停采取行动。如果第一个和最后一个切片的总和为180度或大于180度，则每件事情都正常工作。 但当总和低于此值时，它将停止执行悬停事件。 请访问 在这里，当我在绿色切片上执行鼠标悬停时——在某些点上，鼠标悬停不工作，在某些点上，鼠标悬停工作。此模型存在一个固有的问题。如果要使div元素保持在循环中，必须 或者，按递增顺序添加它们，使其z索引保持不变 或者，按任意顺序添加它们，但z指数增加 我的意思是： <html> <
在这里，当我在绿色切片上执行鼠标悬停时——在某些点上，鼠标悬停不工作，在某些点上，鼠标悬停工作。此模型存在一个固有的问题。如果要使div元素保持在循环中，必须
<html>
<head>
<style type="text/css">
.pieContainer{
position:relative;
}
.pie {
position: absolute;
width: 300px;
height: 300px;
/* -moz-border-radius: 150px;
-webkit-border-radius: 150px;
-o-border-radius: 150px;
border-radius: 150px;
/* */ clip: rect(0px, 300px, 150px, 150px);
}
#pie1{
background-color:#ff0000;
-webkit-transform:rotate(0deg);
z-index:100;
}
#pie2{
background-color:#00ff00;
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
z-index:100;
}
#pie3{
background-color:#0000ff;
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
z-index:100;
}
#pie4{
background-color:#ffff00;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
z-index:100;
}
#pie5{
background-color:#ff00ff;
-webkit-transform:rotate(240deg);
-moz-transform:rotate(240deg);
-o-transform:rotate(240deg);
transform:rotate(240deg);
z-index:100;
}
#pie6{
background-color:orange;
-webkit-transform:rotate(300deg);
-moz-transform:rotate(300deg);
-o-transform:rotate(300deg);
transform:rotate(300deg);
z-index:100;
}
/
/*#pie7{
position:absolute;
width:50px;
height:150px;
background-color:#ff0000;
z-index:101;
left:150px;
-webkit-border-radius: 150px;
}*/
.pie{z-index:1;}
.pie:hover{
background-color:#000000;
}
#idea{-webkit-transform:rotate(20deg);
position:absolute;
top:100px;
left:700px;
z-index:1000;
}
</style>
</head>
<body>
<div class="pieContainer">
<div class="pieBackground"></div>
<div id="pie1" class="pie"></div>
<div id="pie2" class="pie"></div>
<div id="pie3" class="pie"></div>
<div id="pie4" class="pie"></div>
<div id="pie5" class="pie"></div>
<div id="pie6" class="pie"></div>
<div id="pie7"></div>
</div>
<div id="idea">idea</div>
</body>
</html>
皮耶克先生{
位置：相对位置；
}
.馅饼{
位置：绝对位置；
宽度：300px；
高度：300px；
/*-moz边界半径：150px；
-webkit边界半径：150px；
-o-边界半径：150px；
边界半径：150px；
/**/clip:rect（0px、300px、150px、150px）；
}
#馅饼1{
背景色：#ff0000；
-webkit变换：旋转（0度）；
z指数：100；
}
#馅饼2{
背景色：#00ff00；
-webkit变换：旋转（60度）；
-moz变换：旋转（60度）；
-o变换：旋转（60度）；
变换：旋转（60度）；
z指数：100；
}
#馅饼3{
背景色：#0000ff；
-webkit变换：旋转（120度）；
-moz变换：旋转（120度）；
-o变换：旋转（120度）；
变换：旋转（120度）；
z指数：100；
}
#馅饼{
背景色：#ffff00；
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
z指数：100；
}
#馅饼5{
背景色：#ff00ff；
-webkit变换：旋转（240度）；
-moz变换：旋转（240度）；
-o变换：旋转（240度）；
变换：旋转（240度）；
z指数：100；
}
#馅饼6{
背景颜色：橙色；
-webkit变换：旋转（300度）；
-moz变换：旋转（300度）；
-o变换：旋转（300度）；
变换：旋转（300度）；
z指数：100；
}
/
/*#馅饼7{
位置：绝对位置；
宽度：50px；
高度：150像素；
背景色：#ff0000；
z指数：101；
左：150px；
-webkit边界半径：150px；
}*/
.pie{z-index:1；}
.馅饼：悬停{
背景色：#000000；
}
#想法{-webkit变换：旋转（20度）；
位置：绝对位置；
顶部：100px；
左：700px；
z指数：1000；
}
主意
/*-moz边框半径：150px和事情将看起来循环
：一方
：循环一
如果你可以使用，你可以使用非常酷的JS解决方案
最后，你试图做的是一种闭合电路设计，它闭合。（忍不住）（电路冗余）
还有一些问题，如果你想动态地做这件事，你甚至在解决之前就被困住了，因为你没有使用JS | jQuery，如果你使用过的话，还有API。。。你知道的。（再次）我认为问题与相邻切片的z索引有关。如果向每个片段添加某种javascript“hover:not{z-index=0}”，会发生什么？（请原谅伪代码）我已经将它隔离到橄榄绿重叠（不知怎么的）绿色（但不是蓝色或橙色），但是找不到正确的解决方案来纠正它。斯瓦蒂我想你还没有找到这样的解决方案。你能用jQuery吗？