本文介绍了在 HTML 中，如何在将鼠标悬停在文本上时显示图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
在 HTML 中，当我将鼠标悬停在特定文本部分上时，如何使图像出现(或变得可见)?我正在编写一个 HTML 应用程序，以下是我的代码:
In HTML, how can I cause an image to appear (or become visible) while I'm hovering over a specific section of text? I'm coding an HTML app, and the following is my code:
.plank1 {
position: static;
left: 80px;
top: 100px;
visibility: visible;
}
.plank1appear:hover .plank1{
visibility: visible;
}
推荐答案
要在将鼠标悬停在整段文本上时显示图像，您可以在 hover 上显示和隐藏图像:
To show an image when you hover over a whole section of text you can show and hide the image on hover:
CSS
img{
display: none
}
p.one:hover + img{ //img is a sibling
display: block;
}
p.two:hover img{ //image is a child
display: block;
}
HTML
<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
<img src="http://www.placecage.com/100/100"/>
<p class="two">HOVER OVER ME -IMG IS CHILD
<img src="http://www.placecage.com/100/100"/>
</p>
示例
如果您想将鼠标悬停在文本的特定部分上，您可以将文本包装在 span 中，并将图像设为该 span 的同级或子级:
If you want to hover over a specific part of the text, you can wrap the text in a span and just make the image a sibling or child of that span:
HTML
<p>This is some text. <span>HOVER OVER ME</span>
<img src="http://www.placecage.com/100/100"/>
</p>
CSS
img{
display: none
}
span:hover + img{
display: block;
}
示例二
这篇关于在 HTML 中，如何在将鼠标悬停在文本上时显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！