在 HTML 中，如何使鼠标悬停在文本上时显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27809922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In HTML, how can you make an image appear while you are hovering over text?
提问by John Doe
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:
在 HTML 中，当我将鼠标悬停在文本的特定部分时，如何使图像出现（或变得可见）？我正在编写一个 HTML 应用程序，以下是我的代码：
.plank1 {
position: static;
left: 80px;
top: 100px;
visibility: visible;
}
.plank1appear:hover .plank1{
visibility: visible;
}
回答by jmore009
To show an image when you hover over a whole section of text you can show and hide the image on hover:
要在将鼠标悬停在整个文本部分上时显示图像，您可以在 上显示和隐藏图像hover：
CSS
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
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>
OR
或者
If you want to hover over a specific part of the text, you can wrap the text in a spanand just make the image a sibling or child of that span:
如果您想将鼠标悬停在文本的特定部分上，您可以将文本包裹在 a 中span，然后将图像设为它的兄弟或孩子span：
HTML
HTML
<p>This is some text. <span>HOVER OVER ME</span>
<img src="http://www.placecage.com/100/100"/>
</p>
CSS
CSS
img{
display: none
}
span:hover + img{
display: block;
}
