Question

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

我的页面上有一个六边形网格，我需要在每个网格上添加不同的图像和链接。问题是我无法弄清楚我的链接放在哪里。

我设法通过操纵我最初制作为占位符的“红色”类来放置图像（第一个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，这完美无缺！我担心我不确定它为什么会起作用，但确实如此！

Answer 1

尝试将链接放在内部六边形div中，然后设置如下样式：

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

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

Answer 2

尝试将div封装在link tag中，如此：

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

每当点击div时，链接也是如此。

在类div上创建链接？

2 个答案: