如何解决HTML / CSS-将链接悬停在照片上时显示链接
当我将鼠标悬停在图像上时,我希望显示链接。仅当我将鼠标悬停在链接本身(包含在image div中)时,我编写代码的方式才会显示该链接。有什么想法应该继续吗?
.image-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
font-size: 1.5em;
}
.image-text-wrapper .xx {
transition: 1s;
font-weight: 600;
margin: 20px;
}
.image-text-wrapper .xx a {
color: transparent !important;
}
.image-text-wrapper a:hover {
color: lightseagreen !important;
text-decoration: none;
}
<div class="portfolio-img-background" style="background-image:url()">
<div class="xx">
<a href="#">
Text
</a>
</div>
</div>
解决方法
可以稍微修改代码底部的CSS类以使其正常工作。
.image-text-wrapper:hover a {
color: lightseagreen !important;
text-decoration: none;
}
,
这是仅使用CSS的解决方案
#image{
width:200px;
height:200px;
background:black;
display:flex;
align-items:center;
justify-content: center;
}
#link{
display:none;
}
#image:hover > #link {
display:block;
}
<div id="image" class="portfolio-img-background" style="background-image:url()">
<div class="xx" id="link">
<a href="#">
Hi!,im a link
</a>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。