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