在HTML中,如何在将鼠标悬停在文本上时显示图像？

概述在 HTML中,当我将鼠标悬停在特定文本部分上时,如何使图像显示(或变为可见)？我正在编写一个HTML应用程序,以下是我的代码： .plank1 { position: static; left: 80px; top: 100px; visibility: visible; } 在 HTML中,当我将鼠标悬停在特定文本部分上时,如何使图像显示(或变为可见)？我正在编写一个HTML应用程序,以下是我的代码：

.plank1 {             position: static;             left: 80px;             top: 100px;             visibility: visible;        }        .plank1appear:hover .plank1{             visibility: visible;        }

解决方法 要将鼠标悬停在整个文本部分上以显示图像,您可以在悬停时显示和隐藏图像：

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 >HOVER OVER ME - img IS SIBliNG</p><img src="http://www.placecage.com/100/100"/><p >HOVER OVER ME -img IS CHILD   <img src="http://www.placecage.com/100/100"/></p>

EXAMPLE ONE

要么

如果要将鼠标悬停在文本的特定部分上,可以将文本包装在跨度中,只需将图像作为该跨度的兄弟或子项：

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;}

EXAMPLE TWO

总结

以上是内存溢出为你收集整理的在HTML中,如何在将鼠标悬停在文本上时显示图像？全部内容，希望文章能够帮你解决在HTML中,如何在将鼠标悬停在文本上时显示图像？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。