-1

我想让我的整个div链接像a标签一样。当然这对于 js 来说可能是可能的，但我有兴趣看看这是否可能只与 css 相关。

我有这个：

#my_div {
  width: 200px;
  background-color: #090;
}

#my_div:hover {
  background-color: #0f0;
}

页面结构在哪里：

<div id="my_div"><a href="http://google.com">link</a></div>
4

7 回答 7

5

您可以通过将内联元素的display属性设置为block：

/* Make all a tags that are decedents of the
   element with an id of `my_div` be displayed as block level elements */
#my_div a {
    display: block;
    width: 200px;
    height: 100px;
    text-align: center;
    background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }

您实际上并不需要包装-如果您给它一个类或 id，div您可以直接定位特定标签。a

于 2012-09-07T19:52:17.610 回答
3

试试这个：

#my_div a {
    display: block;
    width: 100%;
}
于 2012-09-07T19:52:15.667 回答
3

你不能用 CSS 制作元素，但你可以div用a标签来包装你的元素。它看起来像这样：

<a href="http://google.com"><div id="my_div"></div></a>

这使得整个 div 链接到您的任何href内容。

CSS3content现在确实具有该属性，但我认为您不能将原始 HTML 放入其中。如果有人可以访问您的.css文件，那将是非常糟糕的安全性...

无论如何，我认为上述解决方案是实现您所要求的最简单的方法。

于 2012-09-07T19:54:08.153 回答
1

您需要将您的伪类设置为 a 标签而不是 div：

#my_div a:hover { 
    background-color: #0f0; 
}

那应该做它的工作:-)

于 2012-09-07T19:54:52.110 回答
0

我认为您应该查看发布到堆栈溢出的这个问题。 将 div 设为链接 这是 Google 上关于如何将 div 设为链接的第一个结果。

于 2012-09-07T19:53:53.290 回答
0

请：

  • HTML 为内容添加结构（例如书的章节，强调的内容......）
  • CSS 为这些项目添加了哪些颜色/字体/位置
  • Javascript 添加使其具有交互性。
于 2012-09-07T19:54:57.930 回答
0

您不清楚您的意思是没有“a href”还是没有使用“<a”标签。

如果你的意思是后者，我能想到的唯一另一种方法是让它成为一个表单提交按钮。

于 2021-09-07T05:40:31.963 回答