js div鼠标滑动显示隐藏

JavaScript010

js div鼠标滑动显示隐藏,第1张

一个div的鼠标滑过隐藏后,就再也滑不上了。因为页面已经看不见它了。

所以应该鼠标滑过一个div,让另一个div显示和隐藏,下面是简单代码,仅供参考:

<style>

    div {width:100px height:100px background:#cccmargin:10px}

</style>

<body>

    <div id='div1'></div>

    <div id='div2'></div>

</body>

<script>

    var oDiv1 = document.getElementById('div1')

    var oDiv2 = document.getElementById('div2')

    oDiv1.onmouseover = function(){

        oDiv2.style.display = 'none'

    }

    oDiv1.onmouseout = function(){

        oDiv2.style.display = 'block'

    }

</script>

<img src="" onmousemove="this.src='https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3146244483,1982398836&fm=58'" onmouseout="this.src=''" width="80" height="80">

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{margin: 0pxpadding: 0pxlist-style: nonetext-decoration: none}/*通配符,个人习惯*/

.box{width: 100pxheight: 100px}

.box_div{width: 100pxheight: 100pxbackground: #FFFF00}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js"></script> <!--引用jquery库-->

<script type="text/javascript">

$(function(){

$(".box").mouseover(function(){

$(".box_div").hide()  //隐藏

})

$(".box").mouseout(function(){

$(".box_div").show()  //显示

})

})

//mouseover  当鼠标指针位于元素上方时,会发生 mouseover 事件。

//mouseout   当鼠标指针离开被选元素时,会发生 mouseout 事件。

//hide()    hide() 隐藏

//show()    show() 显示

</script>

</head>

<body>

<div class="box">

<div class="box_div">

我是div

</div>

</div>

</body>

</html>