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 のクリックを追跡し、前の diamonds-container のクリックを手動でトリガーできると思いますが、これが最終的なオプションになります。

javascriptなしでこれを達成するにはどうすればよいですか?

アップデート：

このようにダイヤモンドを配置
ここに画像の説明を入力
する必要があるため、@matewka コードを使用できません。縦方向ではなく縦方向に重なり合うためです。

4

2 に答える 2

0

これが私のアプローチです。2 つの 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 回入れ子になっています。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 に答える