鼠標點擊立方體裏面沒有工作

Question

鼠標正在爲.wrap，.cube和.front，但不能用於.left，.right，.top，.bottom和.back。

HTML

<div class="wrap"> 
    <div class="cube"> 
     <div class="front">front</div> 
     <div class="back"> 
      <div class="content"> 
       <div class="video-wrapper" data-min-width="125" data-width="0.6"> 
        <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="text"> 
        <h4>Video 1</h4> 
        <p> 
         Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed 
         medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar 
         aromatic irish. Id as decaffeinated lungo steamed medium cream filter americano. 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="bottom"> 
     </div> 
     <div class="top"> 
     </div> 
     <div class="left"> 
      <div class="content"> 
       <div class="video-wrapper" data-min-width="125" data-width="0.6"> 
        <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="text"> 
        <h4>Video 1</h4> 
        <p> 
         Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed 
         medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar 
         aromatic irish. Id as decaffeinated lungo steamed medium cream filter americano. 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="right"> 
      <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe> 
      <h4>Theorie</h4> 
      <p> 
       Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed 
       medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic 
       irish. Id as decaffeinated lungo steamed medium cream filter americano. 
      </p> 
     </div> 
    </div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

html, 
body { 
    width: 100%; 
    height: 100%; 
} 

.wrap { 
    perspective: 600px; 
    perspective-origin: 50% 100px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.cube { 
    position: relative; 
    transform-style: preserve-3d; 
    height: 100%; 
    width: 100%; 
} 

.cube > div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.cube > div:not(.front) { 
    border: 1px solid black; 
    background: lightgrey; 
} 

.back { 
    transform: rotateY(180deg) translateZ(400px); 
    //transform: translateZ(400px); 
} 

.left { 
    transform: rotateY(270deg) translateX(-400px); 
    transform-origin: left center; 
} 

.right { 
    transform: rotateY(-270deg) translateX(400px); 
    transform-origin: right top; 
} 

.bottom { 
    transform: rotateX(90deg) translateY(10px); 
    transform-origin: center bottom; 
} 

.top { 
    transform: rotateX(-90deg) translateY(30px); 
    transform-origin: left top; 
} 

.front { 
    transform: translateZ(100px); 
} 

.content { 
    padding: 15px; 
    width: 100%; 
    height: 100%; 
    transform: rotateY(180deg); 
} 

.content > div { 
    float: left; 
} 

.content > .video-wrapper { 
    line-height: 100%; 
} 

.content > .text { 
    width: 35%; 
    padding-left: 15px; 
    text-align: left; 
} 

.only-video { 
    width: inherit; 
    height: inherit; 
} 

.only-video iframe { 
    width: inherit; 
    height: inherit; 
} 

什麼可以做，使立方體內點擊鼠標的工作？

JSFiddle

Answer 1

.back變得可點擊的（至少在FF）時刪除的寬度和高度從.cube等> DIV

還原.back造型：

.back {height: 100%;} 

和也許這將也爲其他元素工作，即。在其自己的選擇器中只設置所需的寬度或高度。

編輯：vals提示的指針事件是一個更好的方法。