做链接，没有“A HREF”，没有JS

-4

我要让我的整个div一个像a标签链接。当然，这可能是与js可能的，但我很感兴趣，看看这是否可能只用css。做链接，没有“A HREF”，没有JS

我有这样的：

#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>

来源

2012-09-07 RIKI

whaaaat ???你那句无厘头 – Bgi

对不起，没错，这是真的愚蠢的问题 – RIKI

我不是说这是愚蠢的，我只是说我不明白你写的...;） – Bgi

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

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

这使得整个div链接到任何你的href是。

CSS3确实现在有content属性，但我不认为你可以把原始的HTML进去。如果有人访问您的.css文件，这将是非常糟糕的安全明智...

无论如何，我认为上述解决方案是实现你问的最简单的方法。

来源

2012-09-07 19:54:08 Jon

这个实际上是一个可怕的建议，因为'div'不能嵌套在内联元素中，比如'a'。在'a'中制作'a'标签'display：block'或者使用一个不同的行内标签，例如'span' '并使它成为'display：block'是合适的路径 – cimmanon

@cimmanon但是如果你看看HTML5规范，它是允许的......不是说你错了，但它在技术上是允许的并且更有意义从设计的角度（IMO） – Jon

试试这个：

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

来源

2012-09-07 19:52:15

你可以让内联元素为块级元素通过设置行动他们的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 - 你可以直接针对特定a标签，如果你给它一个类或ID。

来源

2012-09-07 19:52:17

我认为你应该检查这个问题是张贴到堆栈溢出。 Make a div into a link 这是Google如何创建链接的第一个结果。

来源

2012-09-07 19:53:53

您需要将pseude类没有设置为一个标签到div：

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

应该这样做的工作:-)

来源

2012-09-07 19:54:52 alex1975

请：

HTML增加了结构到内容（例如一本书的章节，什么是强调...）
CSS增加了什么颜色/字体/放置这些项目
Javascript增加了它的互动性。

来源

2012-09-07 19:54:57

这就是它应该是的，但它可以做JS的风格和与CSS交互... – Jon

@Jon - 是的，但保持简单你可以让页面重新看一眼帽子。至于JS - 有些人（例如公司）将此关闭。他们是我们认识的化石，但可能是一个大客户。 –

我的观点正是如此。这是可能的，但不好的做法。 – Jon

做链接，没有“A HREF”，没有JS

回答

相关问题