событие hover на перекрывающихся элементах div не работает - PullRequest
Новая
       0

событие hover на перекрывающихся элементах div не работает

1 голос
/ 24 февраля 2012

Я пытаюсь сделать круговую диаграмму, вращая перекрывающиеся элементы. Мне нужно принять меры при наведении курсора или наведении курсора. Все работает нормально, если сумма первого и последнего фрагмента равна 180 градусов или больше 180 градусов. Но он перестает принимать событие парения, когда сумма опускается ниже. Пожалуйста, посетите http://jsfiddle.net/fjBfE/

здесь, когда я делаю указатель мыши на зеленом срезе - в некоторых точках его наведение мышки не работает, а в некоторых точках его работает.

1 Ответ

0 голосов
/ 24 марта 2012

Эта проблема присуща этой модели. если вы хотите держать элементы div в цикле, вы должны

  1. либо добавьте их в порядке возрастания, сохраняя их z-индекс одинаковым
  2. или добавьте их в любом порядке, но с увеличением z-индекса.

Вот что я имел в виду: 

<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/: квадрат один

http://jsfiddle.net/KzG2Z/1/: круговой

Если вы можете использовать, есть довольно крутые решения JS, которые вы можете использовать.

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

http://g.raphaeljs.com/

В конце концов, вы пытались сделать что-то вроде замыкания, замыкание. (не мог с собой поделать) (схема была избыточной)

Также есть некоторые проблемы: если вы хотите динамически сделать это, вы загнаны в угол даже до того, как решите это, потому что вы не используете JS | jQuery, если вы были, есть API ... вы знаете. (Еще раз)

...