如何在不更改HTML的情况下通过div中的链接使div可单击
我正在尝试制作一个包含文本和链接的div,但是这个div应该是可点击的 我知道我能做到:如何在不更改HTML的情况下通过div中的链接使div可单击,html,css,flexbox,css-selectors,Html,Css,Flexbox,Css Selectors,我正在尝试制作一个包含文本和链接的div,但是这个div应该是可点击的 我知道我能做到: <a href="#link"> <div> <p> some text</p> <a href="#" class="btn_link">my link</a> </div> </a> CSS: 我不知道如何使按钮覆盖整个di
<a href="#link">
<div>
<p> some text</p>
<a href="#" class="btn_link">my link</a>
</div>
</a>
CSS:
我不知道如何使按钮覆盖整个div以使其可点击
注意:我不能改变HTML结构,重要的是使用CSS
有人能告诉我我可以使用什么CSS属性来实现这一点吗?您可以使用一些额外的Javascript代码来实现这一点
//将事件侦听器设置为div
文件
.querySelector(“.link\u div”)
.addEventListener(“单击”,函数(){
//立即计算元素的位置
//在.btn_链接之后。我们无法获取.btn_链接的偏移量,因为它是隐藏的(显示:无),所以紧接着的下一个元素的Y位置应该和它本身一样好。
posY=document.querySelector(“.btn_link”).nextElementSibling.offsetTop
window.scrollTo(0,posY)
});代码>
.btn\u链接{
显示:无
}
.垫片{
垫底:120vh;
背景:#ececec ;;
}
一些文本
一些空间来显示滚动条是如何工作的
链接后的一些文本。上面的链接是隐藏的
您可以使用一些额外的Javascript代码来实现这一点
//将事件侦听器设置为div
文件
.querySelector(“.link\u div”)
.addEventListener(“单击”,函数(){
//立即计算元素的位置
//在.btn_链接之后。我们无法获取.btn_链接的偏移量,因为它是隐藏的(显示:无),所以紧接着的下一个元素的Y位置应该和它本身一样好。
posY=document.querySelector(“.btn_link”).nextElementSibling.offsetTop
window.scrollTo(0,posY)
});代码>
.btn\u链接{
显示:无
}
.垫片{
垫底:120vh;
背景:#ececec ;;
}
一些文本
一些空间来显示滚动条是如何工作的
链接后的一些文本。上面的链接是隐藏的
绝对定位链接
.btn\u链接{
位置:绝对位置;
插图:0;
背景:rgba(0,0,0,15);
}
.my_div{
位置:相对位置;
}
一些文本
绝对定位链接
.btn\u链接{
位置:绝对位置;
插图:0;
背景:rgba(0,0,0,15);
}
.my_div{
位置:相对位置;
}
一些文本
这里只有HTML和CSS:
HTML
输出:
这两个链接都指向“example.com”,除了一个作为文本隐藏,另一个则是一个链接。这里只包含HTML和CSS:
HTML
输出:
这两个链接都指向“example.com”,除了一个隐藏为文本,另一个是纯链接。你能使用javascript吗?你能使用javascript吗?OP不能更改HTML OP不能更改对我有用的HTML谢谢:)对我有用谢谢:)
<div class="my_div">
<p> some text</p>
<a href="#link" class="btn_link"></a>
</div>
.btn_link a {
background: none !important;
border: none !important;
}
<!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>
.hidden-link{
text-decoration-line: none;
color: black;
}