Question

我想添加一个链接到具有叠加层的图像。当用户将鼠标悬停在图片上时，他们会得到不透明的覆盖，并显示文字。这很好用，但是我还需要用户能够单击该图像并将其带到链接。

我在下面粘贴了我的代码-覆盖有效，但链接部分无效。我相信这是因为叠加层会产生干扰。我尝试更改链接的位置，但无法这样做。我可以使“ +”成为链接，但是理想情况下，整个图像都应该链接。

有什么想法吗？

.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #cdcbca;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, visibility .2s;
}
    
    .roomphoto {
        height: 166px;
    }
    
    .img__description {
        transition: .2s;
        transform: translateY(1em);
        z-index: 999;
    }
    
    .overlay {
      position: relative;
    }
    
    .overlay:after {
      position: absolute;
      content:"";
      top:0;
      left:0;
      width:100%;
      height:100%;
      opacity:0;
    }
    
    .overlay:hover:after  {
      opacity: .8;
    }
    
    .blue:after {
      background-color: #1a3761;
    }
    
    .img__description a {
    	color: #fff;
    }
    
    .roomselect {
    clear: both;
    float: none;
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    padding-top: 20px;
    }
    
    .roomselect img {
    width: 100%;
    margin-bottom: -10px;
    }
    
    
    .room3 {
    width: 32%;
    text-align: left;
    float:left;
    }

<div class="roomselect"><div class="room3">
  <div class="roomphoto overlay blue">
    <a href="http://www.google.com">
      <img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
    </a>
    <div class="img__description_layer">
      <p class="img__description">
        <span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
      </p>
    </div>
  </div>
</div>

Answer 1

您需要以这样的方式重新排列html：单击图像时，实际上是单击了定位标记。我已经对您的html进行了一些更改，让我知道这些方法是否有效。您可能需要增加室内照片的高度。

<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
  <div class="roomphoto overlay blue">
  <img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />

  <div class="img__description_layer">
    <p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
  </div>
  </div>
</a>

</div>
</div>

Answer 2

您必须同时更改html和css才能正常工作。对其进行排列，以使img和overlay都包裹在<b-form-input v-model="model.Fee[row.item.id]" @change="changeField('FEE', model.Fee, row.item.id)" ></b-form-input> ... mounted() { this.model.Fee[this.row.item.id] = this.row.item.FEE; },中。并将a目标形式:hover更改为.roomphoto。

.roomphoto:hover .img__description {
  transform: translateY(0);
}

.roomphoto .img__description_layer {
    top: 30px;
}

a:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description_layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #cdcbca;
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, visibility .2s;
}

.roomphoto {
    height: 166px;
}

.img__description {
    transition: .2s;
    transform: translateY(1em);
    z-index: 999;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
}

.overlay:hover:after  {
  opacity: .8;
}

.blue:after {
  background-color: #1a3761;
}

.img__description a {
    color: #fff;
}

.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}

.roomselect img {
width: 100%;
margin-bottom: -10px;
}


.room3 {
width: 32%;
text-align: left;
float:left;
}

将链接添加到重叠图像

2 个答案: