我已经成功设置了四个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/
答案 0 :(得分:1)
.box a:link {
/* rest of code */
display: block;
}
答案 1 :(得分:1)