CSS或者JS实现鼠标悬停显示另一元素


Posted in Javascript onJanuary 22, 2016

想达到鼠标悬停到元素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>三水点靠木</a>
</div>
<div>
<a class='alt' href="/"><span>给你实用的CSS代码</span>网页特效库</a>
</div>
</body>
</html>
Javascript 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
JavaScript学习笔记整理之引用类型
Jan 22 #Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python单元测试简单示例
2018/07/03 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
高二地理教学反思
2014/01/24 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
综治维稳工作汇报
2014/10/27 职场文书
个人工作保证书
2015/02/28 职场文书
个人原因辞职信模板
2015/05/13 职场文书
演讲比赛主持词
2015/06/29 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
总结Java对象被序列化的两种方法
2021/06/30 Java/Android