鼠标内部的多维数据集单击无法

时间:2016-04-06 21:52:30

标签: html css3 3d

鼠标适用于.wrap.cube.front,但不适用于.left.right.top,{{ 1}}和.bottom

HTML

.back

CSS

<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>

如何让鼠标单击在多维数据集中工作?

JSFiddle

1 个答案:

答案 0 :(得分:0)

从.cube&gt;中删除宽度和高度时,

.back变为可点击(至少在FF中)格

恢复.back样式:

.back {height: 100%;}

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

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