在我的页面上有一个 <div>这是 address1 的链接.该 Div 的一 Angular 有一个下拉菜单，其中包含指向 address2 的链接。 .由于某些原因，第二个链接取消了第一个链接，因此无法点击 Link1。
在所附图片中 - Link1 文本、图片和蓝色部分都应链接到 address1 ，只有当我将鼠标悬停在箭头上时出现的 Link2 应该指向 address2 .有什么解决办法吗？
HTML:
<html><head><link rel="stylesheet" href="style.css"></head><body><center>
<a href="address1">
<div class="card">
<div class="dropdown"><img src="img/dropdown.png" class="dropdownarrow"><div class="dropdown-content">
<a class="dropdown-content-item" href="address2">Link2</a>
</div></div><img src="img/smiley.png" class="cardimg">
<div class="container" align="center">
Link1
</div>
</div></a>
</center></body></html>
CSS:
.card {
padding-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background: white;
transition: 0.3s;
width: 20%;
border-radius: 5px;
height: 90%;
display: inline-block;
margin: 20px;
position: relative;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
background-color: #d3f3ff
}
.cardimg {
border-radius: 5px 5px 0 0;
max-width: 50%;
height: 100%;
max-height: 100px;
padding-bottom: 5px;
}
.dropdown {
position: absolute;
right: 0px;
top: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdownarrow {
background-color: #96ffcc;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-item {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.container {
padding-top: 5px;
padding-bottom: 5px;
background: #eeeeee;
height: 100%;
}
最佳答案
您不能在 html markup 中的 a 中放置 a (看看允许的 parent )。
.card {
/* padding-top: 20px; */
/* REMOVED*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background: white;
transition: 0.3s;
width: 20%;
border-radius: 5px;
height: 90%;
display: inline-block;
margin: 20px;
position: relative;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
background-color: #d3f3ff
}
.cardimg {
border-radius: 5px 5px 0 0;
max-width: 50%;
height: 100%;
max-height: 100px;
padding-bottom: 5px;
position: relative;
}
.cardbg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.dropdown {
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdownarrow {
background-color: #96ffcc;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content-item {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.container {
padding-top: 5px;
padding-bottom: 5px;
background: #eeeeee;
height: 100%;
position: relative;
}
/* ADDED */
.card-link {
padding-top: 20px;
display: block;
}<center>
<div class="card">
<div class="dropdown"><img src="https://via.placeholder.com/30x30" class="dropdownarrow">
<div class="dropdown-content">
<a class="dropdown-content-item" href="address2">Link2</a>
</div>
</div>
<!-- moved a below absolute container -->
<a class="card-link" href="address1">
<img src="https://loremflickr.com/300/100" class="cardimg">
<div class="container" align="center">
Link1
</div>
</a>
</div>
</center>关于HTML:如何在另一个 <a> 下方创建 <a>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51466593/