1

我已经成功设置了四个 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/

4

2 回答 2

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

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

于 2013-04-15T22:11:28.200 回答
1

您需要使用的是display:inline-block;. inline-block像block属性一样工作，但它使所有内容都在同一行。如Miljanblock所示，在这种情况下使用可能会起作用，但这是不正确的。所以我会添加类似的东西

.box a {
  display:inline-block;
}

那么你应该很高兴

JSFiddle

于 2013-04-15T22:15:52.033 回答