如何在不更改 HTML 的情况下使 div 可被 div 中的 link 单击

Question

我正在尝试创建一个包含文本的 div 和一个 link，但 div 应该是可点击的。

我知道我能做到：

<a href="#link">
  <div>
    <p> some text</p>
    <a href="#" class="btn_link">my link</a>
  </div>
</a>

但在我的例子中，我需要在 div 中放置一个 link，当我点击 div 时，我应该被重定向到 link带有此 class“btn_link”的 a 标签和 a 标签不应可见

我试过这样做:

<div class="my_div">
  <p> some text</p>
  <a href="#link" class="btn_link"></a>
</div>

CSS :

.btn_link a {
  background: none !important;
  border: none !important;
}

我不知道如何让按钮覆盖整个div以使其可点击。

注意：我无法更改 HTML 结构，使用 CSS 很重要。

谁能告诉我 CSS 属性我可以用什么来实现这个目标？

Answer 1

您可以使用一些额外的 Javascript 代码来完成此操作。

// set an event listener to the div
document
  .querySelector(".link_div")
  .addEventListener("click", function() {
    // calculate the position of the element immediately
    // after .btn_link. We cannot get the offsetTop for .btn_link because it is hidden (display:none) so the Y position of immediate next element should be as good as itself.
    posY = document.querySelector(".btn_link").nextElementSibling.offsetTop
    window.scrollTo(0, posY)
  });

.btn_link {
  display: none
}

.spacer {
  padding-bottom: 120vh;
  background: #ececec;
}

<div class="link_div">
  <p>some text</p>
  <p class="spacer">some space to show how scroll is working .... </p>
  <a href="#link" class="btn_link"></a>
  <p>some text after the link. The link above is hidden</p>
</div>

Answer 2

绝对定位 link

.btn_link {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .15);
}

.my_div {
  position: relative;
}

<div class="my_div">
  <p> some text</p>
  <a href="#link" class="btn_link"></a>
</div>

Answer 3

这里只有 HTML 和 CSS:

HTML

<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
    
<!--The <div>, like you wanted-->
<div>
<!--This  will be the link in the background-->
<a class="hidden-link" href="example.com">
<!--Your text (Wich is a hidden link)-->
<p>Some Text</p>
<!--Your official link-->
<a href="example.com">My Link</a>   
</a>
</div>
    
</body>
</html>

CSS

.hidden-link{
    text-decoration-line: none;
    color: black;
}

输出：

Output-Click me to see the image

两个 link 都转到“example.com”，除了一个隐藏为文本，另一个显然是 link。

如何在不更改 HTML 的情况下使 div 可被 div 中的 link 单击

How can you make a div clickable by a link in the div without changing HTML

html

css

css-selectors

flexbox