网页上的可点击区域 [英] Big clickable areas on a web page

问题描述

对不起，我离开现实。我有一个摘要div，其中包含一个小标题，一点点文本，也许一个图像。我想整个摘要div是一个链接，像这样：

Excuse me while I detach from reality.. I have a summary div which contains a small heading, a little bit of text, maybe an image. I'd like the whole summary div to be a link, something like this:

<div class="summary">
  <a href="#">
    <h4>Small Heading</h4>
    <p>Small amount of text</p>
  </a>
</div>

然后我将样式href看起来像一个漂亮的盒子，改变H4和P：徘徊等等，但是放置一个href会使浏览器生气。

I'd then style the href to look like a nice box, change the H4 and P on :hover, etc etc. But putting an href there makes browsers angry.

任何人都可以建议一种方法实现相同的效果，而不使用Javascript？这是可能吗？

Can anyone suggest a way of achieving the same effect without resorting to Javascript? Is that even possible?

非常感谢！

推荐答案

CSS解决方案是这样做的：

A pure CSS solution would be to do this:

<a href="#">
  <span class="header4">Small Heading</span>
  <span class="paragraph">Small amount of text</span>
</a>

然后将A更改为块元素，并根据您希望的标题和段落：

Then change the A to a block element, and style the spans according to how you want the header and paragraph to look:

<style>
a {
 display: block;
}

span.header4 {
 display: block;
 font-size: 24px;
 font-weight: bold;
 margin: 0 0 10px 0;
}

span.paragraph {
 display: block;
 margin: 0 0 10px 0;     
}
</style>

HTML / CSS纯粹主义者不会喜欢它！

HTML/CSS purist will won't like it, though!

这篇关于网页上的可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！