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 相关文章推荐
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
移动节点的jquery代码
Jan 13 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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
PHP通用检测函数集合
2006/11/25 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP count()函数讲解
2019/02/03 PHP
stripos函数知识点实例分享
2019/02/11 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python提取网页中超链接的方法
2016/09/18 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
珍惜时间演讲稿
2014/05/14 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
财务管理专业自荐书
2014/09/02 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
班委竞选稿范文
2015/11/21 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js