我试图通过在其周围包裹一个链接元素来使 #header
div 可点击,但是当它在 div 中已经有另一个图像链接时我无法做到这一点。我该如何解决这个问题?
#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}
<a href = 'index.php'>
<div id = 'header'>
<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
</a>
现在虽然图像链接工作正常,但 #wrapper
div 不可点击。
最佳答案
#header {
border: 1px solid red;
background-color: red;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
height: 50px;
}
#header a:first-child {
display: block;
height: 100%;
}
#header a:last-child {
position: absolute; /* image now independently clickable */
top: 0; /* position image anywhere you want inside #header */
left: 0;
}
img {
width: 50px;
height: 50px;
}
<div id='header'>
<a href='index.php'></a>
<a href='profile.php?username=$username'>
<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
注意事项:
如果您将一个超链接包裹在另一个超链接中,浏览器应该如何知道要执行哪个链接?
相反,使
#header
元素完全可点击,并绝对定位图像。现在可以单独单击图像并将其放置在
#header
元素内的任意位置。
关于javascript - 将可点击元素放置在可点击容器元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35423056/