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控件
Mar 27 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jQuery cdn使用介绍
May 08 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
jQuery select控制插件
2009/08/17 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python中PIL安装简单教程
2016/04/21 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
函授药学自我鉴定
2014/02/07 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
完整版商业计划书
2014/09/15 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
个人欠条范本
2015/07/03 职场文书