立即注册 找回密码

QQ登录

只需一步,快速开始

如何实现当鼠标移上去时,下方出现一张图的具体CSS的代码

2017-11-20 22:27| 发布者: 大师兄| 查看: 527| 评论: 0

摘要: 今天我们来讲如何实现当鼠标移上去时,下方出现一张图的具体CSS的代码在我们新建的容器的里面再建一个容器比如img标签,首先我们设置这个img为不显示,这样我们鼠标没有移动上去的时候就是不显示的,代码css是.menu ...

今天我们来讲如何实现当鼠标移上去时,下方出现一张图的具体CSS的代码
在我们新建的容器的里面再建一个容器比如img标签,首先我们设置这个img为不显示,这样我们鼠标没有移动上去的时候就是不显示的,代码css是
.menu imag{display:none;}
为了实现鼠标移动上去的时候显示,就要用到一个伪类:hover
当鼠标滑过首页(menu)的时候img显示出来,代码就是
.menu:hover img{display:block;}
原则上到这一步的时候就完成了,但是一般来说需要把图片显示到这个首页的下方,那么还需要对这个img进行定位,一般采用position: absolute来定位,然后相对.menu进行适当的偏移完整的代码实例
————————————————

.menu {
position:relative;
}
.menu imag{display:none;}
.menu:hover img{
display:block;
positionabsolute
positionabsoluteleft0pxtop21px;
}
html 代码例子如下
<div class="menu">首页<img src="xxx.jpg"/></div>

鲜花

握手

雷人

路过

鸡蛋

最新评论

!jz_fbzt! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-5-5 20:47

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

返回顶部