Question

我已经成功设置了四个div，因此它们在每个角落都是视口的25％。现在我想让它们成为可点击的链接，这样我就可以应用在悬停时发生变化的背景图像。

这就是我所拥有的：

HTML：

<div id="intro">
    <div class="box topleft">
        <a href="#1"><h4 class="blockhead">link1</h4></a>
    </div>
    <div class="box topright">
        <a href="#2"><h4 class="blockhead">link2</h4></a>
    </div>
    <div class="box bottomleft">
        <a href="#3"><h4 class="blockhead">link3</h4></a>
    </div>
    <div class="box bottomright">
        <a href="#4"><h4 class="blockhead">link4</h4></a>
    </div>
  </div>

的CSS：

#intro {
    position: absolute;
    width: 100%;
    height: 100%;
}
.box {
    position: inherit;
    width: 50%;
    height: 50%;
}
.box a:active,
.box a:link {
    padding: 0;
    background: none;
    width: 100%;
    height: 100%;
}
.box h4.blockhead {
    position: absolute;
    color: #ffffff;
    padding: 5%;
}
.box.topleft h4.blockhead,
.box.topright h4.blockhead { bottom: 0 }
.box.topleft h4.blockhead,
.box.bottomleft h4.blockhead { right: 0 }
.box.topleft {
    background: #bad80a;
    top: 0;
    left: 0;
}
.box.topright {
    background: #0083d6;
    top: 0;
    right: 0;
}
.box.bottomleft {
    background: #003f87;
    bottom: 0;
    left: 0;
}
.box.bottomright {
    background: #ffc61e;
    bottom: 0;
    right: 0;
}

div中的文本必须保持一致。对正确方向的任何帮助都非常感激。

这里是jsfiddle：http://jsfiddle.net/blackessej/j47Ye/3/

Answer 1

.box a:link {
    /* rest of code */
    display: block;
}

http://jsfiddle.net/j47Ye/1/

Answer 2

您需要使用的是display:inline-block;。 inline-block的工作方式与block属性类似，但它会将所有内容保持在同一行。在这种情况下使用block可能会有效，如Miljan所示，但它不合适。所以我只想添加类似

的内容

.box a {
  display:inline-block;
}

然后你应该好好去

JSFiddle

如何格式化链接，使它们在所有角落中都是视口的25％？

2 个答案: