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

Posted 2023-03-05

【中文标题】在 HTML 中，如何在将鼠标悬停在文本上时显示图像？

【英文标题】：In HTML, how can you make an image appear while you are hovering over text?

【发布时间】：2015-03-04 18:50:10

【问题描述】：

在 html 中，当我将鼠标悬停在特定文本部分上时，如何使图像出现（或变得可见）？我正在编写一个 HTML 应用程序，以下是我的代码：

        .plank1 
             position: static;
             left: 80px;
             top: 100px;
             visibility: visible;
        

        .plank1appear:hover .plank1
             visibility: visible;
        

【参考方案1】：

要在将鼠标悬停在整个文本部分上时显示图像，您可以在 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>

EXAMPLE ONE

或

如果您想将鼠标悬停在文本的特定部分，您可以将文本包裹在 span 中，然后将图像设为该 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;

EXAMPLE TWO

【讨论】：

@JohnDoe 你明白了。乐意效劳。您可以将其勾选为已解决吗？