在HTML中，如何在文本上悬停时显示图像？ [英] In HTML, how can you make an image appear while you are hovering over text?

问题描述

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

  .plank1 {
 position：static; 
 left：80px; 
 top：100px; 
可见性：可见; 
} 
 
 .plank1appear：hover .plank1 {
 visibility：visible; 
 
  

解决方案

将鼠标悬停在可显示的整段文字上，然后将图像隐藏在 hover ：

上。
$ b

CSS

  img {
显示：无
} 
 
 p .one：hover + img {// img是兄弟
 display：block; 
} 
 
 p.two：hover img {//图像是一个孩子
 display：block; 
} 
  

HTML $ b

 < 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是CHILD 
< img src =http://www.placecage.com/100 / 100\" /> 
< / p> 
  

示例一

OR

要将鼠标悬停在文本的特定部分上，可以将文本包装在 span 中，并将该图像设置为 span ：

HTML

 < p>这是一些文字。 < span> HOVER OVER ME< / span> 
< img src =http://www.placecage.com/100/100/> 
< / p> 
  

CSS

  img {
 display：none 
} 
 
 span：hover + img {
 display：block; 
} 
  

示例二

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

解决方案

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>

EXAMPLE ONE

OR

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

EXAMPLE TWO

这篇关于在HTML中，如何在文本上悬停时显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！