用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果，不能用javascript? 15

http://blog.csdn.net/meng1986/article/details/1856858,要实现这样的效果，但是不能用javascript?我要的效果图... http://blog.csdn.net/meng1986/article/details/1856858, 要实现这样的效果，但是不能用javascript?

我要的效果图类似这样的：http://www.ebay.com/itm/Fashion-Girls-Bohemia-Gold-Hollow-Leaf-Hoop-Dangle-Earrings-Ladys-/310638089474?pt=Fashion_Jewelry&hash=item4853791502#ht_2920wt_1158

弄了好久，头都大了，麻烦各位大侠帮帮忙，谢谢，只有15分，都给了。展开

 我来答

4个回答

#热议# 上班途中天气原因受伤算工伤吗？

boyit0
2013-05-24 · 超过11用户采纳过TA的回答

知道答主

回答量：74

采纳率：0%

帮助的人：29.6万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS的下拉菜单支持IE6 IE7 Firefox </title>

<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#CAD9EA;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}
</style>
</head>

<body>

<div class="menu">
<ul>
<li><a href="">XHTML/CSS
</a>

<ul>
<li><a href="">标准</a></li>
<li><a href="">教程</a></li>
<li><a href="">技术文章</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">布局教程专题</a></li>
<li><a href="">CSS菜单</a></li>
<li><a href="">浏览器兼容</a></li>
<li><a href="">滚动条相关</a></li>
<li><a href="">圆角矩形专题</a></li>
<li><a href="">CSS特效欣赏专题</a></li>
</ul>

</li>
<li><a href="">Ajax
</a>

<ul>
<li><a href="">AJAX教程</a></li>
<li><a href="">AJAX技术</a></li>
</ul>

</li>
<li><a href="">javascript
</a>

<ul>
<li><a href="">JSON</a></li>
<li><a href="">技术文章</a></li>
</ul>

</li>
<li><a href="">正则表达式
</a>

<ul>
<li><a href="">正则表达式简介</a></li>
<li><a href="">正则表达式之道</a></li>
</ul>

</li>
<li><a href="">建站技术
</a>

<ul>
<li><a href="">PHP</a></li>
<li><a href="">ASP</a></li>
<li><a href="">ASP.NET</a></li>
<li><a href="">JSP</a></li>
<li><a href="">SQL</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Dreamweaver</a></li>
</ul>

</li>
</ul>
</div>
</body>
</html>

存css支持所有浏览器的

已赞过 已踩过<

评论收起

shy2850
推荐于2018-02-28 · TA获得超过6775个赞

知道大有可为答主

回答量：2505

采纳率：55%

帮助的人：1589万

我也去答题访问个人页

关注

展开全部

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .hover{
            display: block;
            width: 80px;
            line-height: 30px;
            height: 30px;
            overflow: hidden;
            position: relative;
        }
        .hover:hover{
            overflow: visible;
        }
        .hover .ex{
            position: absolute;
            left: 80px;
            top: 0;
            width: 200px;
            line-height: 60px;
            background: #ff0;
            text-align: center;
        }
    </style>
</head>
<body>
    <a class="hover" href="#">
        <span>鼠标</span>
        <div class="ex">
            我是伸展出来的东西.
        </div>
    </a>
</body>
</html>

追问

因为平台不能用JS的，我用JS做了，上传了之后就不能显示。

shy2850，能不能帮我排这样一个版呀，跪求，谢谢

追答

文字太长，不能贴代码了，截个图，自己抄一遍吧。

本回答被网友采纳

已赞过 已踩过<

评论收起

jiangxibaiyi
2013-05-21 · 跟随风去旅行-伤心的歌

jiangxibaiyi

采纳数：3973 获赞数：14412

向TA提问私信TA

关注

展开全部

不用js？
那你能做到啊？
他的原理其实就是利用js改变元素的css值，达到显示隐藏的效果
但不用js，我还真不知道有什么方法

已赞过 已踩过<

评论收起

ncisttiantian
2013-05-21 · TA获得超过2820个赞

知道小有建树答主

回答量：1381

采纳率：20%

帮助的人：612万

我也去答题访问个人页

关注

展开全部

:hover这样就可以的不过这个兼容性不好ie6不行的

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果，不能用javascript? 15

其他类似问题

为你推荐：