只是有链接在块和增强它与jquery。对于没有javascript的任何人，它都可以100%优雅地降级。在我看来，用html来做这件事并不是最好的解决方案。 例如:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

然后使用jquery使块可点击(通过网页设计师墙):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

然后你所要做的就是向div添加游标样式

    #div_link:hover {cursor: pointer;}

为了加分，只有当javascript通过添加'js_enabled'类到div或body或其他东西来启用时才应用这些样式。

如果你可以使用bootstrap，一个简单的解决方案是使用bootstrap .stretch -link。

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

示例代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

需要一点javascript。 但是，你的div是可点击的。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

你不能让div本身成为一个链接，但是你可以让一个<a>标签作为一个块，与<div>具有相同的行为。

a {
    display: block;
}

然后你可以设置它的宽度和高度。

这对我来说很有用:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

最简洁的方法是使用jQuery和HTML中引入的数据标记。使用这个解决方案，您可以在每个标签上创建一个链接。首先用data-link标签定义标签(例如div):

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

现在，您可以随意设置div的样式。你还必须为类似“link”的行为创建样式:

[data-link] {
  cursor: pointer;
}

最后把jQuery调用放到页面上:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

jQuery通过这段代码对页面上具有“data-link”属性的每个标记应用一个点击监听器，并重定向到数据链接属性中的URL。