Question

我有一个带有标题和一些文字内容的盒子，当我将鼠标悬停在它上面时，如何将其作为整个框的链接？我尝试使用锚标签，但它只将文本转换为链接，我希望能够在框内的任何位置单击并转到另一个网页。

HTML：

<div class="box" style="margin-top:100px;">
    <center><h2>Work</h2></center>
    <center><p>TESTTSETTE TESTTSETSTEBSTEBSTE TESTTSETSETSGTSTE TESTTSETSETSGTTE TESTTSETSETSGTE</p></center>
</div>

CSS：

.box {
    border: 2px solid #0094ff;
    width: 204px;
}
.box h2 {
    background: #0094ff;
    color: white;
    padding: 10px;
}
.box p {
    color: #333;
    padding: 10px;
}
.box {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    display: inline-block;
    margin-right: 20px;
}

Answer 1

尝试使用jQuery，例如：

$(document).ready(function) {
    $(".box").click(function() {
        window.location.href = "your_page_url";
    });
});

你可以添加一些css：

.box:hover {
    cursor: pointer;
}

Answer 2

将div放入href标签：

<a href="http://domain.com">
<div class="box" style="margin-top:100px;">
    <center><h2>Work</h2></center>
    <center><p>TESTTSETTE TESTTSETSTEBSTEBSTE TESTTSETSETSGTSTE TESTTSETSETSGTTE TESTTSETSETSGTE</p></center>
</div>
</a>

还为框css添加高度。

Answer 3

我猜你可能想要使用javascript

使用jquery

$('.box').on('click',function(){
 $('body').load('<url goes here>');
});

它不是最优雅的东西尝试像这样玩它 http://jsfiddle.net/aj28y/7/ 确保整个链接适合整个盒子：）

如何将div框更改为链接？

3 个答案: