想达到鼠标悬停到元素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;
}

CSS或者JS实现鼠标悬停显示另一元素的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  3. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 鼠标悬停显示CSS3动画边框

    效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...

  6. EasyUI的Datagrid鼠标悬停显示单元格内容

    功能描述:table鼠标悬停显示单元格内容 1.js函数 function hoveringShow(value) { return "<span title='" + va ...

  7. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  8. Android Studio鼠标悬停显示注释

    Android Studio鼠标悬停显示注释 在AS中配置 如果你想从网上查看注释,到这一步就操作完成. 下面说明让软件使用本地注释: 使用本地注释 以Windows为例: 找到下面文件 C:\Use ...

  9. js设置鼠标悬停改变背景色

    看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...

随机推荐

  1. 变形课(dfs)

    变形课 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Total Submissi ...

  2. CentOS6.5与XP双系统安装

    因为工作的须要,须要安装一个XP系统和一个CentOS系统.依照在网上找到的一些方法尝试了下,结果都不是非常理想.最后,经过尝试和寻找,找到了一个比較方便的方法. 一.分区 本人的电脑硬盘是500G, ...

  3. Windows下nc文件传输

    起初用的一下命令: 接收端:nc –n –l –p port –vv > xxx 发送端:nc –n ip port < yyy 但是发现数据传输完成后,不会自动断开连接,要手动的断开,这 ...

  4. 【斐波拉契+数论+同余】【ZOJ3707】Calculate Prime S

    题目大意: S[n] 表示 集合{1,2,3,4,5.......n} 不存在连续元素的子集个数 Prime S 表示S[n]与之前的所有S[i]互质; 问 找到大于第K个PrimeS 能整除X 的第 ...

  5. 比较好用的sql语句

    判断a表中有而b表中没有的记录 select a.* from tbl1 a left join tbl2 b on a.key = b.key where b.key is null 虽然使用in也 ...

  6. javascript模式——Factory

    Facotry模式是一种创建型模式,他不同于一般编码习惯,显示的调用各个构造函数.Factory模式是提供一个通用的接口来创建对象. 一个Factory模式压缩所有对象创建的方式,降低这个工厂与其它对 ...

  7. class如何命名更规范

    相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地 ...

  8. Silverlight学习(三)

    最近对WCFRIA+MVVM+Prism有了初步的认识,能够简单的实现一些数据库的交互.这节主要讲的是Silverlight通过domainservice和ado.net实体数据模型与数据库的交互.本 ...

  9. oracle权限的分配

    一.创建 sys:   //系统管理员,拥有最高权限 system://本地管理员,次高权限 scott: //普通用户,密码默认为tiger,默认未解锁 二.登陆 sqlplus / as sysd ...

  10. uiwebview 播放视频

    先吐槽下 昨天为了做一个链接优酷的视频难死我了  最后找到一个解决办法 就是uiwebview 播放视频,但是问题又出来了  怎么监听视频开始播放呢??? 我从百度着了4个小时 最后无功而返  最后我 ...