gpt4 book ai didi

javascript - 如何将图像放在内容上方

转载 作者:技术小花猫 更新时间:2023-10-29 11:39:03 29 4
gpt4 key购买 nike

我试图将图像放在文本上方(而不是之前)。下面是我到目前为止的代码。我还发布了我得到的结果和我想要实现的结果。我的目标是,当用户将鼠标悬停在 <p> 上时我想在其上方显示图片,这意味着我需要使用绝对位置,因为我不想将任何内容移动到其他任何地方,我只想在文本上方显示图片。

注意:图像没有定义高度,它可以更长或更短。

 <div id="wrap" style="position:relative; height: 100px; width: 500px; background: red">
<img src="img/cat.png" style="position:absolute; ">
<p style="position:absolute; ">Some text here..</p>
</div>

这是我得到的结果,

enter image description here

这是我想要的结果。注意:我不想移动任何东西,我只想在鼠标悬停后在文本上方显示图像,因此我不需要在任何地方移动任何东西。

enter image description here

最佳答案

工作示例:http://jsfiddle.net/Rhcp5/2/

HTML:

<div id="wrap">
<img src="img/cat.png">
<p>Some text here..</p>
</div>

CSS:

#wrap {
position:relative;
height: 100px;
width: 500px;
background: red;
}

#wrap img {
display: none;
position: absolute;
bottom: 100%;
margin-bottom: 5px;
}

#wrap:hover img {
display: block;
}

这将处理可变高度的图像。

关于javascript - 如何将图像放在内容上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20249269/

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