CSS 如何将 div 元素美化成 a 标签链接？

9 个月前提问

5 个月前修改

浏览次数90次

6个答案

要使用CSS将div元素美化成看起来像a标签链接的样式，我们可以通过设置div的一些基础样式来模拟a标签的外观。下面是具体的步骤和一个例子：

颜色和文本装饰：通常，链接的文本颜色为蓝色，并且有下划线，以便用户可以识别它们。我们可以对div应用相同的样式。
鼠标悬停效果：当鼠标指针悬停在链接上时，链接通常会改变颜色或下划线。我们可以为div添加:hover伪类来实现这个效果。
光标样式：为了让用户知道他们可以点击div，我们可以将光标样式设置为pointer，这通常是链接的标志。
可访问性：虽然样式上可以模仿链接的外观，但div元素默认不具有键盘可访问性和语义性。为了提高可访问性，我们可以使用tabindex属性。
交互性：如果你想让div元素像链接那样实际工作，你需要使用JavaScript来监听点击事件，并导航到指定的URL。

下面是一个将div元素美化成看起来像a标签链接的CSS样式例子：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div as a Link</title>
<style>
  .link-style-div {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    display: inline-block; /* 可以是其他合适的显示类型，根据布局需求而定 */
  }
  .link-style-div:hover {
    text-decoration: none;
    color: darkblue;
  }
</style>
</head>
<body>

<div class="link-style-div" onclick="window.location.href='http://example.com';" tabindex="0">
  点击这个div跳转到example.com
</div>

<script>
  // 为了更好的可访问性，我们可以加入键盘监听事件
  document.querySelector('.link-style-div').addEventListener('keypress', function(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      window.location.href = 'http://example.com';
    }
  });
</script>

</body>
</html>

在上面的代码中，我们创建了一个具有基础链接样式的div元素，当用户点击或者按下回车键（Enter）或空格键（Space）时，页面会导航到http://example.com。我们通过JavaScript添加了点击和键盘监听事件，以实现div的交互性。

2024年6月29日 12:07 回复

来到这里是希望找到一个更好的解决方案，但我不喜欢这里提供的任何解决方案。我认为你们中有些人误解了这个问题。 OP 想让一个充满内容的 div 表现得像一个链接。 Facebook 广告就是一个例子 - 如果你仔细观察，它们实际上是正确的标记。

对我来说，禁忌是： javascript（不应该仅仅为了链接而需要，而且搜索引擎优化/可访问性非常糟糕）；无效的 HTML。

本质上是这样的：

使用正常的 CSS 技术和有效的 HTML 构建您的面板。
在其中的某个位置放置一个链接，如果用户单击面板，您希望该链接成为默认链接（您也可以有其他链接）。
在该链接内，放置一个空的跨度标签（<span></span>，而不是<span />- 感谢@Campey）
给面板位置：相对

将以下 CSS 应用到空范围：

shell
{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

它现在将覆盖面板，并且由于它位于<A>标签内，因此它是一个可点击的链接

给面板内的任何其他链接位置：相对和合适的 z-index (>1)，将它们放在默认跨度链接的前面

2024年6月29日 12:07 回复

您无法创建diva 链接本身，但可以使<a>标记充当 a block，与 a 具有相同的行为<div>。

shell
a {
    display: block;
}

然后您可以设置其宽度和高度。

2024年6月29日 12:07 回复

这是一个古老的问题，但我想我会回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单...

锚标签的工作方式如下 -

shell
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

苏...

shell
<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否有效。如果这就是口头解决方案背后的原因，那么我深表歉意......

2024年6月29日 12:07 回复

需要一点 JavaScript。但是，你的div将是可点击的。

shell
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

2024年6月29日 12:07 回复

This option doesn’t require an empty.gif as in the most upvoted answer:

HTML:

shell
 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

shell
 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

2024年6月29日 12:07 回复

CSS 如何将 div 元素美化成 a 标签链接？

6个答案

你的答案