您的位置：首页 > 编程技术 > js  >  CSS或者JS实现鼠标悬停显示另一元素

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

 更新时间：2016年1月24日 10:01  点击：1978

想达到鼠标悬停到元素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>
[!--infotagslink--]

相关文章

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • jquery ready函数、css函数及text()使用示例

    .text更改内容 .css更改样式...2013-10-03

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • 解决vue scoped scss 无效的问题

    这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • 基于JavaScript获取鼠标位置的各种方法

    这篇文章主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下...2015-12-18

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • 在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27

  • JavaScript驾驭网页-CSS与DOM

    DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28

  • js+css简单实现网页换肤效果

    这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-02

  • Webpack打包css后z-index被重新计算的解决方法

    这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24

  • javascript+css3 实现动态按钮菜单特效

    这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏，js+css实现黑色经典导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-03-18

  • jquery结合css实现返回顶部功能

    在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。...2021-08-02

  • Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法，需要的朋友参考下...2016-02-05

  • jquery及js实现动态加载js文件的方法

    这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24

  • Vant+postcss-pxtorem 实现浏览器适配功能

    这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05