Question

On my page there's a <div> which is a link to address1. The corner of that Div there's a drop-down menu with a link to address2. From some reason, the second link cancels the first one, and so Link1 cannot be clicked.

在所附的图像-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%;
}

Answer 1

您不能在html markup中的a内放置a（请看允许的父母）。

.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>

Answer 2

好的，所以我找到了一种可行的解决方法：我在div的背景中添加了空白图像，并更改了<a>标签的位置。我在CSS中使用了大量的position和一个z-index来确保菜单位于顶部，但最终一切都很好。这是代码：

HTML：

<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>
      <a href="address1"><img src="img/blank.png" class="cardbg"><img src="img/smiley.png" class="cardimg">
      <div class="container" align="center">
        Link1 
      </div></a>
    </div>

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;
  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;
}

Answer 3

尝试

.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><head><link rel="stylesheet" href="style.css"></head><body><center>
    
    <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">
       <a href="address1"> Link1</a>
      </div>
    </div>
</center></body></html>

Answer 4

如果您的图像是正确的，并且链接1应该是灰色的底部，那么这可行：

  .card {
  padding-top：20像素；
  box-shadow：0 4px 8px 0 rgba（0,0,0,0.2）;
  背景：白色；
  过渡：0.3秒;
  宽度：20％;
  border-radius：5px;
  高度：90％;
  显示：inline-block;
  边距：20px;
  职位：相对
}

.card：hover {
  box-shadow：0 8px 16px 0 rgba（0,0,0,0.2）;
  背景颜色：＃d3f3ff
}

.cardimg {
  border-radius：5px 5px 0 0;
  最大宽度：50％；
  高度：100％;
  max-height：100像素；
  padding-bottom：5px;
}

。落下 {
  位置：绝对；
  右：0px；
  顶部：0px；
}

.dropdown：hover .dropdown-content {
  显示：块；
}

.dropdown：悬停.dropdownarrow {
  背景颜色：＃96ffcc;
}

.dropdown-content {
    显示：无；
    位置：绝对；
    背景颜色：＃f1f1f1;
    最小宽度：160像素；
    box-shadow：0px 8px 16px 0px rgba（0,0,0,0.2）;
    z索引：1；
}

.dropdown-content-item {
    颜色：黑色
    填充：12px 16px;
    文字修饰：无；
    显示：块；
}

.dropdown-content a：hover {
  背景颜色：#ddd;
}

。容器 {
  padding-top：5像素；
  padding-bottom：5px;
  背景：#eeeeee；
  高度：100％;
}

.card a {
   文字修饰：无；
   颜色：黑色；
}

HTML：如何创建<a> below another </a> <a>?

4 个答案: