在HTML中,如何在将鼠标悬停在文本上时显示图像?
发布时间:2020-12-14 23:44:11 所属栏目:资源 来源:网络整理
导读:在 HTML中,当我将鼠标悬停在特定文本部分上时,如何使图像显示(或变为可见)?我正在编写一个HTML应用程序,以下是我的代码: .plank1 { position: static; left: 80px; top: 100px; visibility: visible; } .plank1appear:hover .plank1{ visibility: visible;
在
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; } 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 要么 如果要将鼠标悬停在文本的特定部分上,可以将文本包装在跨度中,只需将图像作为该跨度的兄弟或子项: 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |