Mouseover не зарегистрирован на повернутом div

Question

Я переворачиваю div, используя css3 transform rotateY. На задней панели есть кнопка. Он отлично работает отлично, но не регистрирует манипулятор несколько раз сразу после полного поворота div.

HTML Hover Count:

<flip-tile heading="Free Test" message="Take FREE TEST to earn embibium crystals!" status="'locked'" class="ng-isolate-scope"> 
    <div class="flip-holder locked" ng-class="status"> 
     <div class="front"> 
     <h3 class="title ng-binding"> 
      Free Test 
     </h3> 
     <img alt="Flip Button" class="flip-button" src="/assets/ts_metro_theme/flip-btn.png"><i class="lock-button fa fa-lock"></i><!-- ngIf: stats.rating=='champ' --><span class="count">2 of 3</span> 
     </div> 
     <div class="back ng-scope" ng-if="status=='locked'"> 
     <div class="buy-holder"> 
     <span class="ng-binding">Click to unlock all JEE Main tests for</span><!-- ngIf: price --><button ng-if="price" class="ng-scope ng-binding"><i class="fa fa-rupee"></i>999</button><!-- end ngIf: price --> 
     </div> 
     <img alt="flip-btn" class="flip-button" src="/assets/ts_metro_theme/flip-btn.png"> 
    </div> 
    </div> 
    </flip-tile> 

CSS

flip-tile { 
    display: inline-block; 
    position: relative; 
    font-family: 'Open sans', 'Quicksand', Helvetica; 
    width: 150px; 
    height: 180px; } 

flip-tile .flip-holder, 
flip-tile .front, 
flip-tile .back { 
    width: inherit; 
    height: inherit; } 

flip-tile span.count { 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
    font-size: 14px; 
    display: none; } 

flip-tile h3.title { 
    margin-top: 10px; 
    padding-left: 10px; 
    font-weight: normal; 
    font-size: 15px; } 

flip-tile .back p { 
    margin: 10px; } 

flip-tile .lock-button { 
    position: absolute; 
    bottom: 8px; 
    right: 10px; 
    display: none; } 

flip-tile .lock-button { 
    display: none; } 

flip-tile .locked .lock-button { 
    display: inline-block; } 

flip-tile .flip-button { 
    position: absolute; 
    bottom: 7px; 
    left: 9px; 
    width: 23px; 
    display: inline-block; } 

flip-tile .imp-chapter { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    color: #fbfdaa; } 

flip-tile .back .tile-stats { 
    margin: 27px 10px; } 

flip-tile .buy-holder { 
    text-align: center; 
    margin-top: 48px; 
    font-size: 14px; } 

flip-tile .buy-holder span { 
    display: block; } 

flip-tile .buy-holder button { 
    width: 100px; 
    margin: 5px; 
    background: transparent; 
    border: 1px solid #fff; 
    outline: 0; 
    color: #fff; } 

flip-tile .buy-holder button:hover { 
    background-color: #fff; 
    color: #444; } 

flip-tile .front .champ-badge { 
    width: 42px; 
    position: absolute; 
    bottom: 5px; 
    right: 6px; } 

flip-tile .back .tile-stats img { 
    width: 17px; } 

flip-tile .back .tile-stats > div { 
    margin: 4px 0; } 

flip-tile .back .tile-stats span { 
    width: 106px; 
    display: inline-block; 
    text-align: right; } 

flip-tile .flip-holder .front, 
flip-tile .flip-holder .back { 
    background-color: #aaa; 
    color: #fff; } 

flip-tile .locked .front, 
flip-tile .locked .back { 
    background-color: #888; 
    color: #fff; } 

flip-tile .started .front, 
flip-tile .started .back, 
flip-tile .fresh .front, 
flip-tile .fresh .back { 
    background-color: #29b8eb; 
    color: #fff; } 

flip-tile .good .front, 
flip-tile .good .back { 
    background-color: #55a417; 
    color: #fff; } 

flip-tile .average .front, 
flip-tile .average .back { 
    background-color: #f29c21; 
    color: #fff; } 

flip-tile .bad .front, 
flip-tile .bad .back { 
    background-color: #f22133; 
    color: #fff; } 

flip-tile .fa-repeat { 
    position: absolute; 
    top: 156px; 
    left: 10px; } 

flip-tile .flip-holder { 
    -webkit-perspective: 100px; 
    -moz-perspective: 100px; 
    -ms-perspective: 100px; 
    -o-perspective: 100px; 
    perspective: 100px; 
    height: inherit; 
    width: inherit; } 

flip-tile:hover .flip-holder { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); } 

flip-tile .flip-holder { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    position: relative; } 

flip-tile .front, 
flip-tile .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; } 

flip-tile .front { 
    z-index: 2; } 

flip-tile .back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    transform: rotateY(180deg); } 

JS

var i=0; 
$('flip-tile .back button').mouseenter(function(e){ 
    $('span.count').html(++i); 
}); 

Пожалуйста, помогите! Заранее спасибо.

http://jsfiddle.net/HKWFL/

Answer 1

Проблема, кажется, быть вызвано родительским контейнером, который, как представляется, быть наложен поверх кнопки на повернутом назад элемент. У меня был беспорядок с вашим JS Fiddle, а затем он лишил его до нужных предметов (here), и проблема все же возникла. Я сделал поиск Google для «скрытых элементов при 3D-преобразовании» и нашел пару сообщений, которые на самом деле не помогли; специально this page on stack overflow, которые привели меня к этой странице:

http://thewebrocks.com/demos/3D-css-tester/

На этой странице элементы, которые составляют вращающееся изображение остаются интерактивными по всему, так что я получил источник и возился с этим, так что сделали то же самое твои сделали первоначально, и это сработало, но не оставалось бы нависшим. Поэтому я завернул все в родительский элемент, чтобы сохранить область зависания, а затем проблема снова началась!

Это заставило меня подумать, что родительский объект скрывал содержимое сзади после завершения вращения, поэтому я использовал дополнительное свойство translateZ(10px) для смещения его от родителя, и теперь он отлично работает.

Вот скрипка:

http://jsfiddle.net/chrissp26/AB8GG/1/

Извинения для разметки изменения, то нужно разбить, чтобы обеспечить больше ничего не мешала с ним. Однако вы можете легко применить CSS к своему оригинальному решению.