html鼠标放上去块弹动

html-css055

html鼠标放上去块弹动,第1张

由于悬浮层有可能从上下左右四个方向滑入目标块,因此需要先针对结构进行处理。

在此,可以通过两种方法实现“悬浮层”。

一种方法是为每个块定位四个悬浮块(上下左右),当满足鼠标移入的条件时,让相应的悬浮块滑入;

第二种方法是只为每个块定位一个悬浮框,每次鼠标移入时,先“初始化”悬浮块的位置,之后再控制悬浮框滑入。

在本文的案例当中,小编使用的是第二种方法(初始化悬浮块位置)来实现滑动。

使用Dreamweaver软件,打开一个已经编辑完成的html页面。

然后打开折叠的body标签,在标签的末尾添加一个DIV

在DIV里面加入一个img标签,src指向images文件夹中的一张图片

这时的div并没有相应的css样式,只处在整个网页的左下角

接下来我们就需要将给其添加一定的css样式,为了简便起见,我的css样式就写在页面的body标签里面了。

首先我们要让这个DIV的position样式为fixed,意为相对于屏幕定位。然后将top设为20pxright也设为20px这样我们的div就固定在相对距离屏幕上方和右方分别20个像素的地方