html - 如何将图像链接到另一个页面?
问题描述
我有一个 div,其中有一个图像,应该作为另一个页面的链接。上面有一些文字。位于此处https://wearehomefolks.com/index.php/home/
我是从网上其他地方拿来的,我可能稍微修改了一下。
我只是希望图像链接到其他内部页面。并保持悬停效果。
当我将鼠标悬停在有 5 个图像上时,没有链接动作。请问这里出了什么问题?
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>
CSS:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
谢谢
解决方案
您应该添加pointer-events: none
到叠加层(即 的 CSS 规则.hvrbox .hvrbox-layer_top
)。这样点击可以“通过它”到链接的图像以触发链接:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
pointer-events:none;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>
推荐阅读
- python - 如何在不编码和解码的情况下在扭曲的 python 包上发送消息?
- javascript - 每次都想呈现我所达到的价值
- android - 如何在命令行中使用 APKsigner 签名 APK 时应用 proguard、minifyEnabled 和 shrinkResources
- python - Python Lambda 函数无法应用于多列
- python - 烧瓶 api 路由请求获取参数丢失错误
- pandas - 具有多个条件的 Pandas drop_duplicates
- multidimensional-array - 如何快速对多维数组进行排序
- node.js - 如何呈现特定选项卡
- css - 在图像上显示版权作为标题
- c++ - cmake/cpack 分发一个库及其依赖项