重複するdivを回転させて円グラフを作成しようとしています。私はマウスオーバーやホバー上でアクションを取る必要があります。最初と最後のスライスの合計が180degまたは180degより大きい場合は、すべてのことがうまく動作しています。 しかし、合計が下になると、ホバーイベントを停止します。 緑色のスライスでマウスオーバーすると、マウスオーバーラップが機能しないことがあり、ある時点では動作している場合があります。 http://jsfiddle.net/fjBfE/重複するdivのホバーイベントが機能していません
このモデルにはこの固有の問題があります。あなたがループ内で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>
は、コードの先頭でこのコメントを削除：/* -moz-border-radius: 150px;、物事は円形になります。
http://jsfiddle.net/KzG2Z/：正方形の1
http://jsfiddle.net/KzG2Z/1/：円形1
あなたが使用することができますかなりクールなJSのソリューションがある場合は使用することができます。あなたがしようとしたものを最後に
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
近い回路設計の一種である、それが閉じます。 （回路が冗長であった）
また、動的にこれを行うには、JSを使用していないために対処する前でも、 jQuery、もしあなたがいたら、APIがあります...あなたは知っています。 （もう一度）
私は問題が隣接スライスのZ-インデックスと関係していると思います。 javascript「hover：not {z-index = 0}」を各スライスに追加するとどうなりますか？ – Heroes182
私はそれをオレンジグリーンに（何とか）重なり合っていますが（青でもオレンジでなくても）、それを修正する正しい解決策を見つけることができません。 – ScottS
スワティ私はこの方法であなたのソリューションを見つけられていないと思います。 jQueryと一緒に行くことができますか？ –