代码之家  ›  专栏  ›  技术社区  ›  shakedzy

HTML:如何在另一个<a>下面创建<a>?

css html
  •  0
  • shakedzy  · 技术社区  · 8 年前

    在我的页面上有一个 <div> 这是一个链接 address1 . 在那个Div的角落里有一个下拉菜单,其中有一个指向 address2 . 由于某种原因,第二个链接取消了第一个链接,因此无法单击Link1。

    example

    在附加的图片-Link1文本中,图片和蓝色部分都应该链接到 地址1 ,只有当我将鼠标悬停在箭头上时出现的Link2应该指向 地址2 . 有什么办法解决这个问题吗?

    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%;
}
    4 回复  |  直到 8 年前
        1
  •  1
  •   SirPilan    8 年前

    你不能放一个 a 在一个 一 在里面 html markup (看看允许的父母)。 

    .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>
        2
  •  0
  •   shakedzy    8 年前

    好吧,我找到了一个可行的解决方法:在 div ,并更改了 <a> 标签我用了很多 position 在CSS和 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;
}
        3
  •  -1
  •   sanoj lawrence    8 年前

    试试这个 

    .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>
        4
  •  -1
  •   Christopher Supertramp    8 年前

    如果图像正确,并且链接1应为灰色底部,则此操作有效: 

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

.card a {
   text-decoration: none;
   color:black;
}
      <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">
    <a href="address1">
      <div class="container" align="center">
        Link1
      </div>
      </a>
  </div>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    1 年前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    1 年前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号