纯CSS+DIV实现滑动门

    最近在弄一个网站模板，想添加一个滑动门效果，不想使用另外JS，麻烦还要加载，有没有纯粹使用DIV+CSS布局添加少量代码就能实现网页滑动门效果的？
    在网上找了好久，最后找到一个最少代码实现效果的例子，按照他给的思路，自己在已经写好的样式上面在修改一下：
    DIV+CSS滑动门超简单实现代码 下载：
   

    讲解：
    1、<a href="#" onmousemove="dh.style.display='none';xc.style.display='none';zy.style.display='block'">儿童安全座椅</a>
    主要使用了onmousemove事件：dh 是下面要切换DIV的选择符，一定要与你下面定义的每个滑动门的类选择符相同，style 给它触动事件时的样式，display='none' 隐藏的意思，display='block' 将他转化为块级元素，我粗糙的理解就是显示。
    上面一句话的意思就是：当鼠标覆盖移动到“儿童安全座椅”上面的时候，dh是隐藏、xc是隐藏的、但是zy转化为块元素显示出来。
    2、除了第一个滑动门，其他滑动门上添加样式：例子附件内<ul id="dh" style="display:none;">
    意思就是：当我们鼠标都没有移动或触动着几个滑动门的时候，默认显示的是第一个滑动门内信息。
    附件内的文件，我也添加了图片，增加了一点显示效果，如果都是文字的话总觉得有点太单调。

TAGS:DIV , CSS , 滑动门

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/19.html转载请标注此链接