对不起,我脱离现实..我有一个摘要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吗?这甚至可能吗?
非常感谢!
答案 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是)