Question

我希望将整个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>

Answer 1

您可以将内联元素设置为块级元素，方法是将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; }

您实际上并不需要换行div - 如果您为其指定了类或ID，则可以直接定位特定的a标记。

Answer 2

试试这个：

#my_div a {
    display: block;
    width: 100%;
}

Answer 3

您无法使用CSS创建元素，但您可以使用div标记包裹a。它看起来像这样：

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

这使得整个div成为href所有内容的链接。

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

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

Answer 4

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

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

应该这样做： - ）

Answer 5

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

Answer 6

请：

HTML为内容添加了结构（例如，书籍的章节，强调的内容......）
CSS添加了这些项目的颜色/字体/位置
Javascript添加使其互动。

建立链接，没有“a href”，没有JS

6 个答案: