该事件的效果就像百度首页的设置选项，当鼠标移入，移出时的效果，废话不多说了，直接上码。

　　<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
    <style type="text/css">·····························································一下是CSS
    #wrap{
        width: 150px;height: 200px;
        /*background: rgb(211,211,211);*/
        margin: 200px auto 0px;
        text-align: center;
        position: relative;
        background: rgb(225,225,225);
    }
    a{
        color:white;
        display: inline-block;
        width: 150px;height: 20px;
        
    }

.one{
        position: absolute;
        left: 70px;top: 14px;
        color: white;

}
    #div1{
        width: 80px;height:81px;
        margin: 3px auto 0px;
        background: white;

}
    #div1 a{
        display: inline-block;
        width:78px;
        height: 25px;
        color:black;
        font-size: 15px;
        line-height: 25px;
        text-decoration: none;
        position: relative;
        margin: 1px 1px;
        z-index: 1;
    }
    </style>
</head>
<body>
    <div id="wrap">·············································································HTML内容
        <a href="#" id="set">设置</a>
        <span class="one">♦</span>
        <div id="div1">
            <a href="#" class="two">搜索设置</a>
            <a href="#" class="two">高级搜索</a>
            <a href="#" class="two">搜索历史</a>
        </div>
    </div>
    <script type="text/javascript">······································································一下是JS

var set = document.getElementById('set');
    var div1 = document.getElementById('div1');
    var one = document.getElementsByClassName('one');
    var two = document.getElementsByClassName('two');
    one[0].style.display = 'none';
    div1.style.display = 'none';
    set.onmouseover = function (){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    set.onmouseout = function (){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    two[0].onmouseover = function(){
        two[0].style.background = 'rgb(57,139,251)';
    }
    two[1].onmouseover = function(){
        two[1].style.background = 'rgb(57,139,251)';
    }
    two[2].onmouseover = function(){
        two[2].style.background = 'rgb(57,139,251)';
    }
    two[0].onmouseout = function(){
        two[0].style.background = 'white';
    }
    two[1].onmouseout = function(){
        two[1].style.background = 'white';
    }
    two[2].onmouseout = function(){
        two[2].style.background = 'white';
    }

div1.onmouseover = function(){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    div1.onmouseout = function(){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    one[0].onmouseover = function(){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    one[0].onmouseout = function(){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    </script>
</body>
</html>

进入页面时的效果是这样的：

当鼠标移入设置上时，效果是这样的：

当鼠标移入下面的选项的时候，背景颜色会变成蓝色：

到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。

以上是JS写法，下面是JQ的写法

JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：

　　1、var  a = $("#wrap");

　　　a.on（"mouseover",function(){"鼠标移入时想要的效果"}）；

　　　a.on("mouseout",function(){"鼠标移出事想要的效果"})；

　　2、这一种方法类似于css中的hover效果，相对比而言更简单一点：

　　　　var a = $("#wrap");

　　　　a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；

JS鼠标移入，移出事件的更多相关文章

  1. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  2. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  3. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  4. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  5. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  6. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  8. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

  9. 为EasyUI的dataGrid单元格增加鼠标移入移出事件

    onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $( ...

  10. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

随机推荐

  1. js解决IE不支持数组的indexOf()方法

    if (!Array.indexOf) {                                    Array.indexOf = function (obj) {            ...

  2. oracle计算两行差值

    Lag和Lead分析函数可以在同一次查询中取出同一字段的前N行的数据(Lag)和后N行的数据(Lead)作为独立的列. 这种操作可以代替表的自联接,并且LAG和LEAD有更高的效率. SELECT c ...

  3. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...

  4. PSP个人（观众界面）

    需求:作为一个观众,我希望了解某一场比赛的比分,以便了解赛况.(满意条件:精确到每一局的结果比分) 需求分析:实现查询数据库中每一局的分数并用界面显示. 生成设计文档: 运用三层架构,实现软件的基本功 ...

  5. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

  6. Java堆内存的十个要点

    Java中的堆空间是什么? 当Java程序开始运行时,JVM会从操作系统获取一些内存.JVM使用这些内存,这些内存的一部分就是堆内存.堆内存通常在存储地址的底层,向上排列.当一个对象通过new关键字或 ...

  7. Windows程序设再读笔记01-起步

    1.从程序员角度看,统一的界面意味着编程人员可以使用windows自带的例程来构建许多的功能,例如菜单,对话框等.只用几行代码就可以实现很多复杂的功能.但是这同时也增加了一些限制,使得做出一个个性化的 ...

  8. <读书笔记>软件调试之道 ：问题的核心-诊断

    声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记. 不要急于动手! 尽管可以利用各种工具和技术以及软件自身查找缺陷,但是你最重要的财富是你的智 ...

  9. [MAC]OS X Mavericks 10.9.5 / 10.10.2 VMWare vmdk镜像，解压就能用！

    用起来是比VirtualBox好使很多: 1.鼠标很灵敏,不像Vbox那么飘 2.显卡有驱动,VM可以配置显示器尺寸,完美支持网络.语音.视频,直接搞全屏,还能看电影 3.USB设备支持热插拔 4.支 ...

  10. VC++ 判断文件或文件夹是否存在的快捷方法 _access

    _access函数 int _access( const char *path, int mode ); int _waccess( const wchar_t *path, int mode ); ...