0

有一个相对简单的问题（或者我认为），但我只是编码的新手。

我的页面上有一个六边形网格，我需要在每个网格上放置不同的图像和链接。问题是我不知道在哪里放置我的链接。

通过操纵我最初作为占位符制作的“红色”类，我设法通过 CSS 放置图像（第一个 HTML 行，我在其中指定了我的图像的“red1”类）。

为了放置链接，我迷路了。非常感谢任何帮助，如果我遗漏了重要信息，请多多包涵。

这是我的代码，所以你们可以明白我的意思：

HTML: <section class="hex clearfix">
        <div class="hex-grid-top">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red1"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
        <div class="hex-grid-mid">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
        <div class="hex-grid-bot">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
    </section>

相关CSS：

     .hexagon {
     overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
        transform: rotate(120deg);
    cursor: pointer;
}

.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
   -moz-transform: rotate(-60deg);
     -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
}

.hexagon-in2 {
    width: 100%;
    height: 100%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

.hexagon-in2:hover {
}


.hexagon-scale {
    width: 100px;
    height: 200px;
}

.red {
    background: red;
}

.red1 {
    background-image: url(../Images/thumbs/001-thumb.gif);
        width: 50;
    height: 50;

}





.hex {
    margin: 20px auto 0 auto;
    width: 600px;
    height: auto;
}

.hex-grid-top {
    display: inline-block;
    margin: 0 55px -105px 55px;
}

.hex-grid-mid {
    display: inline-block;
    margin: 0 auto -105px auto;
}

.hex-grid-bot {
    display: inline-block;
    margin: 0 55px;
}

.hex-grid-top .hexagon {
    float: left;
    margin: 0px 10px;
}

.hex-grid-mid .hexagon {
    float: left;
    margin: 0px 10px;

}

.hex-grid-bot .hexagon {
    float: left;
    margin: 0px 10px;
}

正如我所说，我想知道如何为这些六边形添加链接！如果我能做到这一点的唯一方法就是以不同的方式附加图像，那就这样吧。

提前致谢，

托马斯

编辑：感谢 VLS，效果很好！恐怕我不确定它为什么有效，但它确实有效！

4

2 回答 2

0

尝试将您div的 s 包装成link tag这样：

<a href="your/link/address"><div class="hexagon hexagon-scale"></a>

每当单击 div 时，链接也会出现。

于 2013-11-13T04:47:21.960 回答
0

尝试将链接放在你的内六边形 div 中，然后像这样设置样式：

.hexagon-in2 a {
    width: 100px;
    height: 120px;
    top: 40px;
    display: block;
    position: absolute;
}

演示： http: //jsfiddle.net/verashn/z9Ver/（为了清楚起见，我注释掉了cursor: pointer）

于 2013-11-13T04:41:23.953 回答