0

我正在构建一个奇怪的 div 形结构，我需要一个提示来解决点击问题。

这是一个向您展示问题的jsfiddle。每个元素的结构是：

    <div class="views-row">
       <div class="diamonds-container">  
          CONTENT
       </div>
   </div>

我在 .diamonds-container 上有一个 onclick() 事件，但是下一个元素的 .views-row div [带有红色或蓝色背景..] 越过容器并停止其上的单击事件。

我尝试使用 z-index，但没有得到预期的结果。

如何通过在 diamonds-containers 上的正确点击事件来实现这种结构？

我想我可以使用 javascript 跟踪 .views-row 点击并手动触发点击前一个钻石容器，但这将是我的最终选择。

没有javascript，我怎么能做到这一点？

更新：

我必须像这样定位我的钻石，
在此处输入图像描述
所以我不能使用@matewka 代码，因为我将垂直重叠而不是 orizzontally..

4

2 回答 2

0

这是我的方法。我不确定将两个 div 相互嵌套是出于旋转目的还是有其他含义。无论如何，我是这样做的：

.views-row {
    width: 130px;
    height: 130px;
    -webkit-transform: rotate(45deg);
}
.views-row-first {
    -webkit-transform-origin: 195px center;
}
.views-row-even {
    -webkit-transform-origin: center center;
}
.views-row-odd {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: -65px center;
}

每个都.views-row被旋转并且变换原点都指向中间 div 的中心。请注意，这些transform-origin值是宽度的一半 (130px / 2) 的倍数。
有关完整的 CSS，请参阅更新的 FIDDLE。我还添加了一个:hover属性，.diamonds-container以便您可以看到它们都是可点击的。

更新

使用您添加的图片，问题变得更加复杂。但我想通了。
提示：如果你等不及小提琴 - 你会在答案的底部找到它。

想法：

方盒嵌套两次。每 2 个.diamond盒子都用.pair-wrapperdiv 包裹。该 div 旋转45 度，并沿其容器重复几次。每个甚至 .pair-wrapper都增加了宽度以正确定位其右侧邻居。

一堆.pair-wrappers被包裹着.line-wrapper。您可以根据需要添加尽可能多.line-wrappers的.pair-wrapper内容（请记住 -.pair-wrappers如果它们不合适，将进入新行）。

最后，每个.line-wrapper都有固定的高度和隐藏的溢出，以从顶部和底部限制其子区域。每个.pair-wrapper都相对定位并且具有负值top。

该解决方案主要基于固定值，我都可以想出一个更好的主意。

编码

示例 HTML 标记如下所示：

<div class="line-wrapper line-wrapper-odd">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-even">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
</div>
<div class="line-wrapper line-wrapper-even">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    .....
</div>
.....

以及 CSS 中最重要的部分（小提琴中的完整 CSS）：

.line-wrapper {
    height: 170px;
    overflow: hidden;
}
.line-wrapper-even {
    margin-left: -92px;
}
.pair-wrapper {
    width: 130px;
    position: relative;
    top: -26px;
    -webkit-transform: rotate(45deg);
}
.pair-wrapper-odd {
    -webkit-transform-origin: 65px 65px;
}
.pair-wrapper-even {
    -webkit-transform-origin: 92px 131px;
    width: 239px;
}
.diamond-box {
    width: 130px;
    height: 130px;
}

小提琴

http://jsfiddle.net/N3V6J/3/

于 2013-11-06T13:11:47.567 回答
0

There is more than one route for this kind of problem.

If you use the rotation transform anyway, why not rotate the .views-row element to get the bounding box out of the way?

For recent browsers and IE11 there are pointer events. See this updated fiddle.

.views-row {
    z-index: 1;
    pointer-events: none;
}

.diamonds-container {
    z-index: 9;
    pointer-events: auto;
}
于 2013-11-06T12:54:04.743 回答