html - 鼠标在多维数据集内单击不起作用

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 从 .cube > div 中删除宽度和高度时变为可点击(至少在 FF 中)

恢复 .back 样式:

.back {height: 100%;}

也许这也适用于其他元素，即。在他们自己的选择器中仅设置所需的宽度或高度。

编辑:vals 建议的指针事件是一种更好的方法。