gpt4 book ai didi

css - 悬停时出现文本/链接

转载 作者:行者123 更新时间:2023-11-28 12:05:39 25 4
gpt4 key购买 nike

我尝试了解决方案 herehere没有运气。我的 css 文件原样:

.JFK {
position: relative;
left: 250px;
height: 200px;
width: 200px;
bottom: -45px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
}
.JFK a p{
position: relative;
top: -130px;
display: none;
}
.JFK a:hover p{
display: block;
}

.JFK:hover{
opacity: 0.6;
display: block;
}

我的 html:

<div class = "JFK">
<p>JFK</p>
<a href = "#"><p>to</p></a>
<a href = "#"><p>from</p></a>
</div>

我试图让链接在悬停时显示在图像的底部。以前帖子中的解决方案没有奏效。使用我当前的设置,加载页面时根本看不到“TO”或“FROM”。

最佳答案

悬停应该在 .JFK 而不是 .JFK a 当你悬停在 .JFK 上时,它应该使 .JFK a p 可见。

.JFK:hover a p {
display: block;
}

这里是一个 jsfiddle 的链接,其中包含更改:https://jsfiddle.net/efv8ch70/

希望对你有帮助

关于css - 悬停时出现文本/链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40031819/

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