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小框架 fly javascript framework
Nov 26 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
鼠标悬停小图标显示大图标
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中使用Oracle数据库(5)
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
php中目录,文件操作详谈
2007/03/19 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Python random模块常用方法
2014/11/03 Python
python3.6的venv模块使用详解
2018/08/01 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python中取绝对值简单方法总结
2020/07/24 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
工作失职检讨书范文
2014/01/16 职场文书
医学专业自荐信
2014/06/14 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
员工离职通知函
2015/04/25 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
php将xml转化对象的实例详解
2021/11/17 PHP
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers