鼠标事件-------鼠标移动到元素上事件

以下为当前总结，还未完善好，正在不断补充

1.弹框

2.鼠标移动到元素上时，显示提示文本。===>title标签，显示元素额外信息

例:鼠标移动到图片上时弹出提示文字/框

<img title="作 者：DIVCSS5
更新时间：2013-05-17
推荐等级：无
关键字：title换行
分页方式：不分页" src="./09.png">

扩展：title换行代码---&#10或者&#13,例：

<a href="http://www.jb51.net" 
title="第一排&#10;第二排&#10;第三排">title换行1</a> 
<a href="http://www.jb51.net" 
title="说明一&#13;说明二&#13;说明三">title换行2</a>

2.图片变为提示字

3.出现隐藏块http://www.docin.com/p-908214039.html

4.悬停下拉

5.①滑过时，控制元素显示/隐藏（无具体要求）

<div onmousemove="xianshi()" onmouseout="yincang()">显示/隐藏</div>
<script>
    function xianshi(){
        test.style.display = 'block';
    }
    function yincang(){
        test.style.display = 'none';
    }
</script>
经过测试后也可以写到一起：
<div onmousemove="test.style.display = 'block'" onmouseout="test.style.display = 'none'">显示/隐藏</div>

扩展：对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

[注意]如果要适用于任何元素需要提前储存元素的display值

②要求可以移动到显示层上（或者区分从标签还是层上移出鼠标）

<a href="javascript:voie(0)" id="show" onmouseover="xianshi()">鼠标放上测试</a>
<div id="tupian" style="display: none; background: red; width: 100px">
    我显示出来啦！！！
</div>
<script>
    var timer;
    function xianshi(){
        var picture = document.getElementById("tupian");
        var show = document.getElementById("show");
        picture.style.display="block";
        picture.onmouseover=function(){
            clearTimeout(timer);
            picture.onmouseout=function(){
                this.style.display="none";
            }
        }
        show.onmouseout=function(){Mout()}
    }//若从图片（显示层）移出鼠标则立刻隐藏图片，且用到clearTimeout(timer)函数
    
    function Mout(){
        timer = setTimeout(function(){document.getElementById("tupian").style.display="none";},1000);
    }//若从标签移出，则1秒后隐藏图片
</script>

6.Bootstrap导航条可点击和鼠标悬停显示下拉菜单

【注意】默认的bootstrap的二级或多级菜单是点击才出现的。那么如果你想点击时跳转页面，就只能是实现点击出现下拉菜单，页面跳转失效。

如何实现点击跳转页面，鼠标滑过出现下级菜单呢

你就需要修改Bootstrap.js里面的一个js。你也可以在自己的页面中覆盖原来的js啦

$(document).ready(function(){

$(document).off('click.bs.dropdown.data-api');

});

鼠标滑过的效果就可以直接用css来写

.nav > li:hover .dropdown-menu { display: block; }

[注意]如果要适用于任何元素需要提前储存元素的display值 ②要求可以移动到显示层上（或者区分从标签还是层上移出鼠标）

<a href="javascript:voie(0)" id="show" onmouseover="xianshi()">鼠标放上测试</a>
<div id="tupian" style="display: none; background: red; width: 100px">
    我显示出来啦！！！
</div>
<script>
    var timer;
    function xianshi(){
        var picture = document.getElementById("tupian");
        var show = document.getElementById("show");
        picture.style.display="block";
        picture.onmouseover=function(){
            clearTimeout(timer);
            picture.onmouseout=function(){
                this.style.display="none";
            }
        }
        show.onmouseout=function(){Mout()}
    }//若从图片（显示层）移出鼠标则立刻隐藏图片，且用到clearTimeout(timer)函数
    
    function Mout(){
        timer = setTimeout(function(){document.getElementById("tupian").style.display="none";},1000);
    }//若从标签移出，则1秒后隐藏图片
</script>

鼠标事件-------鼠标移动到元素上事件

猜你喜欢