gpt4 book ai didi

html - 图像悬停效果不适用于文本

转载 作者:太空宇宙 更新时间:2023-11-04 03:02:03 25 4
gpt4 key购买 nike

我有一张图片想显示为链接。当鼠标悬停在图像上时,我有一个悬停效果,但我还想在图像上叠加一个文本标签。问题是,当鼠标悬停在文本上时,图像效果停止工作。

我的代码如下。谁能建议我如何解决这个问题?

<html>

<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.pic {
border: 5px solid #FF0000;
float: left;
width: 475px;
height: 375px;
margin: 20px;
overflow: hidden;
position: relative;

-webkit-box-shadow: 5px 5px 5px #C0C0C0;
box-shadow: 5px 5px 5px #C0C0C0;
}

.grow img {
width: 475px;
height: 375px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.grow img:hover {
width: 570px;
height: 450px;
}

.label {
top: 150px;
position:absolute;
text-align:center;
font-size:500%;
color: FF0000;
width: 100%;
}
</style>

<a href="MyLink.html">
<div class="grow pic">
<img src="MyImage.jpg" alt="TITLE">
<div class="label">TITLE</div>
</div>
</a>

最佳答案

您可以尝试禁用指针事件:

.label { pointer-events:none; }

关于html - 图像悬停效果不适用于文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31155563/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com