Mouse event-------mouse-over-element event

The following is the current summary, which has not been perfected and is constantly being added.

 

1. Pop-up frame

 

2. When the mouse moves over the element, the prompt text is displayed. ===>title tag, display element extra information

Example: When the mouse moves over the picture, a prompt text/box will pop up

<img title="Author: DIVCSS5
Update time: 2013-05-17
Recommended level: none
Keyword: title wrap
Paging method: no paging" src="./09.png">

 Extension: title newline code--- or , for example:

<a href="http://www.jb51.net"
title="First row
Second row
Third row">title wrap 1</a>
<a href="http://www.jb51.net"
title="Instruction 1
Instruction 2
Instruction 3">title wrap 2</a>

 

 

2. The picture becomes the prompt word

 

 

 

3. A hidden block appears http://www.docin.com/p-908214039.html

 

 

 

4. Hover to pull

 

 

5. ① When sliding over, the control element is displayed/hidden (no specific requirements)

 

<div onmousemove="xianshi()" onmouseout="yincang()">show/hide</div>
<script>
    function xianshi(){
        test.style.display = 'block';
    }
    function yincang(){
        test.style.display = 'none';
    }
</script>
It can also be written together after testing:
<div onmousemove="test.style.display = 'block'" onmouseout="test.style.display = 'none'">显示/隐藏</div>

 Extension: For the display and hiding of elements, the most common is display:none | display:block, but there is a problem with this method. The display property of the element is not all block before it is hidden, and it may be inline, inline- block etc.

[Note] If you want to apply to any element, you need to store the display value of the element in advance

②The requirement can be moved to the display layer (or to distinguish the mouse from the label or the layer)

<a href="javascript:voie(0)" id="show" onmouseover="xianshi()">mouse over test</a>
<div id="tupian" style="display: none; background: red; width: 100px">
    I show it! ! !
</div>
<script>
    were hours;
    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()}
    }//If you move the mouse from the picture (display layer), the picture will be hidden immediately, and the clearTimeout(timer) function will be used
    
    function Mout(){
        timer = setTimeout(function(){document.getElementById("tupian").style.display="none";},1000);
    }//If removed from the label, hide the image after 1 second
</script>

 

 

 

 

 

6. Bootstrap navigation bar can be clicked and mouse over to display drop-down menu

[Note] The default bootstrap secondary or multi-level menu appears only after clicking. Then if you want to jump to the page when you click, you can only realize the drop-down menu when you click, and the page jump will fail.

How to realize the click to jump to the page, the mouse slides over to appear the sub-menu?

You need to modify a js in Bootstrap.js. You can also overwrite the original js in your own page

$(document).ready(function(){

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

});

The effect of mouse over can be written directly with css

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

 

 

 

 

 

[Note] If you want to apply to any element, you need to store the display value of the element in advance. ② The requirement can be moved to the display layer (or to distinguish the mouse from the label or the layer)

<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>