请教怎样用CSS设置鼠标指向弹出对话框

html-css023

请教怎样用CSS设置鼠标指向弹出对话框,第1张

可以使用hover 比如有个父盒子暂且给个类名为f 有个子盒子暂且给个类名为c 给c一个disiplay:none;让其隐藏 然后.f:hover.c {disiplay:block} 这样当鼠标悬停父盒子的时候 子盒子就会显示出来 另外 需要注意hover和.c之间没有空格

实现鼠标悬停在图片上底部弹出文字内容的实现方法:

HTML代码:

<div id="wrapper">

<img src="http://placehold.it/300x200" class="hover" />

<p class="text">text</p>

</div>

CSS代码:

#wrapper .text {

position:relative

bottom:30px

left:0px

visibility:hidden

}

#wrapper:hover .text {

visibility:visible

}