网页上的大可点击区域

时间:2009-08-04 13:43:52

标签: html css

对不起,我脱离现实..我有一个摘要div,其中包含一个小标题,一些文字,也许是一个图像。我希望整个汇总div成为一个链接,如下所示:

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

然后我将href设置为看起来像一个漂亮的盒子,更改H4和P on:hover等等。但是在那里放一个href会让浏览器生气。

有人可以提出一种方法来实现相同的效果,而无需借助Javascript吗?这甚至可能吗?

非常感谢!

8 个答案:

答案 0 :(得分:3)

纯CSS解决方案就是这样做:

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

然后将A更改为块元素,并根据标题和段落的显示方式设置范围样式:

<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纯粹主义者不会喜欢它!

答案 1 :(得分:2)

这种语法 - 链接中的块级项目 - 在HTML5中是允许的。这应该得到所有浏览器的支持(因为那些不太了解的人总是这样做)。

您需要做的就是更改您的文档类型,然后向您的朋友夸耀您的现代性: - )

答案 2 :(得分:0)

为什么不使用javascript?

<div class="summary" onclick="window.location.href='www.google.com';>
  <h4>Small Heading</h4>
  <p>Small amount of text</p>
</div>

如果没有javascript,您将无法获得所有可点击的div区域。只有文字。

答案 3 :(得分:0)

尝试将a元素的样式更改为display:block

答案 4 :(得分:0)

我可能完全错过了你的目标。

当我将示例代码复制到文本编辑器并在浏览器中打开它(Leopard上的FF 3.5)时,它运行正常。我甚至还添加了一些造型。

它是否打破了特定的浏览器?还是它没有验证?

您是否尝试将锚标记放在div的外部?

答案 5 :(得分:0)

这会做你想要的,但你将失去选择(复制+粘贴)链接覆盖下的文本的能力。你也无法控制IE6中的:hover伪类(因为IE6及以下版本不支持它)。

这是HTML:

<div class="summary">
    <h4>Some Text</h4>
    <p>A short description</p>
    <a href="#" class="overlay">Anchor Text</a>
</div>

这是CSS:

<style>
div.summary {
 position: relative; 
 width: 200px; 
 height: 100px; 
 z-index: 10; 
}

div.summary h4 {
 position: relative;
 font-size: 18px;
 font-weight: bold; 
}

div.summary p {
 position: relative; 
}

a.overlay {
 display: block; 
 position: absolute; 
 text-indent: -9999px; 
 width: 200px; 
 height: 100px; 
 z-index: 30; 
 top: 0; 
 left: 0;
}
</style>

作为注释,请确保在.overlay类的容器元素上声明一个位置,以便绝对定位起作用。您还需要确保在每个z-index定位元素的父元素上声明一个位置。

如果您有任何问题,请告诉我。

答案 6 :(得分:-1)

扩展Andrejs的说法:

    a.clickDiv {
       display:block;

    }


    <a href="somelink.html" class="clickDiv">

    content

    </a>

答案 7 :(得分:-2)

简短的回答是“没有有效的,标准的,语义正确的HTML”。 (HTML 5还不是标准的,需要hacks才能让它在各种浏览器中运行)

如果你采用无效技巧或丢弃标题,你就可以实现它,但这不是一个好主意。

合理数量的用户浏览文档中的链接以查找有用的链接。屏幕阅读器用户是一个很好的例子。如果链接文本很大(就像在你的例子中那样),这种好处就会丢失。

使用JavaScript是一个很好的解决方案(但是,当然,只有在JS不可用的情况下才能正常运行)。

我将在这个例子中使用jQuery(它使用DOM做足够的不同事情来证明它)。

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

jQuery('div.summary').click(function () {
    jQuery('a', this).click();
});

我没有对此进行测试,但如果click()没有按照我的预期进行测试,可以将其替换为:

jQuery('div.summary').click(function () {
    document.location = jQuery('a', this).attr('href');
});

如果JavaScript不可用,标题仍然是可点击的链接。如果是,则可以点击整个区域。

您可以添加悬停效果:

jQuery('div.summary').addClass('hoverable');

div.hoverable:hover { background-color: green; }

(这样,如果JS不可用,那么悬停效果将不会触发,但CSS是)