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的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JavaScript判断数组类型的方法
Oct 23 Javascript
详解Webpack4多页应用打包方案
Jul 16 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
优秀食品类广告词
2014/03/19 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
儿子满月酒致辞
2015/07/29 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL