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 ...
随机推荐
- 搭讪培训班 - 名品试用 - YOKA时尚论坛 - YOKA社区
搭讪培训班 - 名品试用 - YOKA时尚论坛 - YOKA社区 搭讪培训班 发贴回复 发新话题 发布投票 搭讪培训班 1330 1 阅读 回复 跳转到指定楼层 加为好友 时尚懒洋洋 工作:无业游 ...
- 警惕:利用Dropbox链接散播的恶意软件
趋势科技近期发现好几起利用热门文档代管服务Dropbox的垃圾邮件.邮件的内嵌链接会下载UPATRE恶意软件变种.UPATRE下面载恶意软件而恶名昭彰,当中包含ZBOT恶意软件.CryptoLocke ...
- iOS 各种传值方式
属性传值 将A页面所拥有的信息通过属性传递到B页面使用 B页面定义了一个naviTitle属性,在A页面中直接通过属性赋值将A页面中的值传到B页面. A页面DetailViewController.h ...
- 第九十六题(编写strcpy 函数)
96.08 年中兴校园招聘笔试题 1.编写strcpy 函数 已知strcpy 函数的原型是 char *strcpy(char *strDest, const char *strSrc); 当中st ...
- Object-c学习之路七(oc字符串操作)
// // main.m // NSString // // Created by WildCat on 13-7-25. // Copyright (c) 2013年 wildcat. All ri ...
- C#关于事件的几个好例子
#region // 定义BoiledEventArgs类,传递给Observer所感兴趣的信息 public class BoiledEventArgs : EventArgs { public r ...
- C#编程打字指法练习
很惊讶昨晚写的第一篇学习笔记竟然有个评论了,只是今天还是对基础知识提不起精神,还是先看那三本书了解一下程序开发的大概流程吧. 今天不知道怎么闲逛就找到了这个网站,说是专门用于编程练习的,用google ...
- L10 PUtty+SSH 访问vncviewer
在Linux下配置一个VNC服务器,并设置2个用户,要求其中一个用户登录时不需要输入密码.然后在客户端使用ssh+vncview的方式访问. 安装tigervnc: 输入的密码是123456 连接服务 ...
- HTML5新属性
1.contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承. 所有主流浏览器都支持 contentedita ...
- yii2 安装过程中的问题及解决方法
一.php版本要求5.4+,如果使用wamp组合包,建议更换 二.各种模块的支持,一般只要修改php.ini文件,去掉相应模块前的注释即可. 注意,Intl extension模块的支持需要将 ...