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

时间:2015-01-07 01:05:20

标签: html css image hover

在HTML中,当我将鼠标悬停在特定文本部分上时,如何使图像显示(或变为可见)?我正在编写HTML应用程序,以下是我的代码:

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

        .plank1appear:hover .plank1{
             visibility: visible;
        }

1 个答案:

答案 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>

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