时间戳

首页 > 解决方案 > 使 CSS 网格元素成为超链接

html - 使 CSS 网格元素成为超链接

问题描述

我真的不确定如何将网格元素设为超链接 anno 2019 标准。我需要网格元素<div class="item1">成为超链接。

我如何以最好的方式做到这一点？

代码示例

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/7;
  height: 700px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("/Cms/ea8d405c-d794-4616-9b16-c921a76c43a2.jpg");
}
<div class="wrapper">
  <div class="item1">
    <span>TAG</span>
    <span class="sbp-title light-font" href="#">Read More</span>
  </div>
</div>

标签： htmlcss

解决方案

对于超链接，<a>即使 javascript 可以为您提供将onclick事件附加到任何内容的机会，标签也是必需的，请注意，您的 html 文档在没有 CSS 和 JavaScript 的情况下仍然有意义。（屏幕阅读器和搜索引擎将不胜感激）。

首先要做的是把它span变成一个真正的链接，这样如果链接的文档位于其他地方并且需要打开，就可以找到它。

请注意，如果您想在文档中加载一些额外的文本、javascript 和表单元素或 onclick 事件以向服务器发送请求，甚至是 CSS 以隐藏/显示部分文本，还有其他方法。

简单的 CSS 和 HTML 可能性

  • span变成了一个链接和一个伪元素来覆盖整个父级

.item1 {
  position: relative;
}

.item1 a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/7;
  height: 80vh; /* update for demo purpose */
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("/Cms/ea8d405c-d794-4616-9b16-c921a76c43a2.jpg");
}
<div class="wrapper">
  <div class="item1">
    <span>TAG</span>
    <a class="sbp-title light-font" href="#">Read More</a>
  </div>
</div>

  • 或者把父DIV变成真正的链接注意，不能嵌套其他链接和表单元素

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/7;
  height: 80vh;  /* update for demo purpose */
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("/Cms/ea8d405c-d794-4616-9b16-c921a76c43a2.jpg");
}


/* mind css styling outline, color, underline ... */
<div class="wrapper">
  <a class="item1" href="#">
    <span>TAG</span>
    <span class="sbp-title light-font">Read More </span>
  </a>
</div>

如果您期望的不仅仅是链接到另一个页面，您可以考虑使用 javaScript / ajax 并最终形成表单元素。无论如何，请确保可以访问您要显示的内容。

如果您要显示的文本是隐藏的并且是该文档的一部分，CSS 可以帮助您显示它。如果是这种情况，请更新您的问题，以便我们向您展示可以做什么。

推荐阅读