这篇文章主要介绍了 CSS 或者 JS 实现鼠标悬停显示另一元素的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
想达到鼠标悬停到元素 a 上,显示另一个元素 b,可以通过 css 实现也可以通过 js 实现。
js:
写两个函数:mouseenter,mouseleave,例如:其中
- $("#a").mouseenter(function() {
- $("#b").show("normal");
- });
- $("#a").mouseleave(function() {
- $("#b").hide("normal");
- });
css:a 元素和 b 元素需要满足一定的关系,即 b 是 a 的直接子元素:如下 html 元素,div header_login_name_change 是 a 元素,ul header_login_menu 是 b 元素。
在 a 元素上写 hover,后面是 b 元素
- <div id="a" class="a">
- <a class="content">
- <span id="txt">
- 苹果
- </span>
- </a>
- <a class="role_down">
- </a>
- <ul class="b">
- <li class="role">
- 栗子
- </li>
- </ul>
- </div>
- css,display: block; .a:hover .b { display:block; background: #2B7193;
- cursor: pointer; }
另外,如果元素 b 宽度需要满屏,而其中的元素又有距离左边距离等,则 b 样式如下:需要设置 width: 100%, position:absolute.
通过 b 下面的 div 来为其中的元素定位,该 div 也就是例子中的 c,设置居中:
- .c {
- width: 1280px;
- margin: auto;
- }。
元素 a 样式:.b {
- height: 40px;
- width: 100%;
- background-color: #2a7193;
- position: absolute;
- z-index: 10006;
- display: none;
- margin-top: -5px;
- left: 0;
- }
这样 c 中的元素可以相对 c 来定位,无论电脑屏幕有多宽,都不会变形。
html 代码:
- <div class="a" id="a">
- <div class="btn">
- </div>
- <div id="b" class="b">
- <div class="c">
- <div class="rcontent" id="content">
- <a class="dropdown_content">
- <span>
- 花生
- </span>
- </a>
- </div>
- </div>
- </div>
- </div>
对应的 css:
- #a:hover .b{
- display: block;
- }
ps:css 实现鼠标悬停时滑出层提示的方法
本文实例讲述了 css 实现鼠标悬停时滑出层提示的方法。分享给大家供大家参考。具体分析如下:
这是一个简单的鼠标悬停提示特效,类似于 alt 标签,不过这一种是用纯 CSS 实现,扩展性好,而且在提示的层里可以加入图片或其它布局,这个要根据你的需要了。
代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>css实现层提示</title>
- <style>
- div{
- clear:both;
- margin:5px 0 0 0;
- font-size:12px;
- line-height:22px;
- }
- a.alt{
- position:relative;
- background-color:#fff;
- float:left;
- width:158px;height:20px;
- margin:0 auto;
- border:1px solid #eee;
- text-align:center;
- text-decoration:none;
- color:#0066cc;
- }
- a.alt:hover{
- background:#fff;
- text-decoration:none;z-index:2;
- }
- a.alt span{
- display:none;
- }
- a.alt:hover span{
- position:absolute;
- display:block;
- top:-1px;left:158px;
- width:130px;height:60px;
- border:1px solid #eee;
- z-index:1;
- }
- </style>
- </head>
- <body>
- <div>
- <a class='alt' href="/"><span>一个高品质脚本资料网站</span>phperz</a>
- </div>
- <div>
- <a class='alt' href="/"><span>给你实用的CSS代码</span>网页特效库</a>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0216/267453.html