时间戳

首页 > 解决方案 > HTML：如何在另一个下面创建？

html - HTML：如何在另一个下面创建？

问题描述

在我的页面上有<div>一个指向address1. 该 Div 的角落有一个下拉菜单，其中包含指向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%;
}

标签： htmlcss

解决方案

您不能在html 标记a中放置一个内部（查看 Permitted parents）。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>

推荐阅读