CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素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;
}
CSS或者JS实现鼠标悬停显示另一元素的更多相关文章
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- jQuery实现鼠标悬停显示提示信息窗口的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery鼠标悬停显示提示信息窗体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 鼠标悬停显示CSS3动画边框
效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...
- EasyUI的Datagrid鼠标悬停显示单元格内容
功能描述:table鼠标悬停显示单元格内容 1.js函数 function hoveringShow(value) { return "<span title='" + va ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- Android Studio鼠标悬停显示注释
Android Studio鼠标悬停显示注释 在AS中配置 如果你想从网上查看注释,到这一步就操作完成. 下面说明让软件使用本地注释: 使用本地注释 以Windows为例: 找到下面文件 C:\Use ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
随机推荐
- 变形课(dfs)
变形课 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Total Submissi ...
- CentOS6.5与XP双系统安装
因为工作的须要,须要安装一个XP系统和一个CentOS系统.依照在网上找到的一些方法尝试了下,结果都不是非常理想.最后,经过尝试和寻找,找到了一个比較方便的方法. 一.分区 本人的电脑硬盘是500G, ...
- Windows下nc文件传输
起初用的一下命令: 接收端:nc –n –l –p port –vv > xxx 发送端:nc –n ip port < yyy 但是发现数据传输完成后,不会自动断开连接,要手动的断开,这 ...
- 【斐波拉契+数论+同余】【ZOJ3707】Calculate Prime S
题目大意: S[n] 表示 集合{1,2,3,4,5.......n} 不存在连续元素的子集个数 Prime S 表示S[n]与之前的所有S[i]互质; 问 找到大于第K个PrimeS 能整除X 的第 ...
- 比较好用的sql语句
判断a表中有而b表中没有的记录 select a.* from tbl1 a left join tbl2 b on a.key = b.key where b.key is null 虽然使用in也 ...
- javascript模式——Factory
Facotry模式是一种创建型模式,他不同于一般编码习惯,显示的调用各个构造函数.Factory模式是提供一个通用的接口来创建对象. 一个Factory模式压缩所有对象创建的方式,降低这个工厂与其它对 ...
- class如何命名更规范
相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地 ...
- Silverlight学习(三)
最近对WCFRIA+MVVM+Prism有了初步的认识,能够简单的实现一些数据库的交互.这节主要讲的是Silverlight通过domainservice和ado.net实体数据模型与数据库的交互.本 ...
- oracle权限的分配
一.创建 sys: //系统管理员,拥有最高权限 system://本地管理员,次高权限 scott: //普通用户,密码默认为tiger,默认未解锁 二.登陆 sqlplus / as sysd ...
- uiwebview 播放视频
先吐槽下 昨天为了做一个链接优酷的视频难死我了 最后找到一个解决办法 就是uiwebview 播放视频,但是问题又出来了 怎么监听视频开始播放呢??? 我从百度着了4个小时 最后无功而返 最后我 ...