在HTML中,当我将鼠标悬停在特定文本部分上时,如何使图像显示(或变为可见)?我正在编写HTML应用程序,以下是我的代码:
.plank1 {
position: static;
left: 80px;
top: 100px;
visibility: visible;
}
.plank1appear:hover .plank1{
visibility: visible;
}
答案 0 :(得分:5)
要将鼠标悬停在整段文字上时显示图片,您可以在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>
如果您希望将鼠标悬停在文字的特定部分上,可以将文字换成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;
}