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

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

img{
   display: none
}

span:hover + img{
   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>

<p>This is some text. <span>HOVER OVER ME</span>
   <img src="http://www.placecage.com/100/100"/>
</p>

CSS

img{
   display: none
}

p.one:hover + img{ //img is a sibling
   display: block;
}

p.two:hover img{ //image is a child
   display: block;
}

img{
   display: none
}

span:hover + img{
   display: block;
}

---

@JohnDoe你明白了。很乐意帮忙。你能检查一下这个问题是否解决了吗？