css+js 触发之后边边出现一个div,且鼠标移到那个div时div不消失
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css+js 触发之后边边出现一个div,且鼠标移到那个div时div不消失相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#two
display: none;
</style>
<script type="text/javascript">
function a()
var two=document.getElementById("two");
two.style.display='block';
a();
function b()
var two=document.getElementById("two");
two.style.display='none';
b();
</script>
</head>
<body>
<a id="one" href="#" onmouseover="a()" onmouseout="b()">
11
</a>
<div id="two" style="border: 1px solid #000000; width: 200px; height: 200px;"></div>
</body>
</html>
var hiddenDiv = document.getElementById('hid');
title.onmouseover =function hov()
hiddenDiv.style.display = 'block';
title.style['margin-top']='12px'
title.style.transform='scale(1.4)'
title.onmouseout=function(event)
var x=event.clientX;
var y=event.clientY;
var divx1 = hiddenDiv.offsetLeft;
var divy1 = hiddenDiv.offsetTop;
var divx2 = hiddenDiv.offsetLeft + hiddenDiv.offsetWidth;
var divy2 = hiddenDiv.offsetTop + hiddenDiv.offsetHeight;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2)
hiddenDiv.style.display='none';
title.style['margin-top']='0px'
title.style.transform='scale(1)'
hiddenDiv.onmouseover=function show()
hiddenDiv.style.display='block';
title.style['margin-top']='12px'
title.style.transform='scale(1.4)'
hiddenDiv.onmouseout=function hide()
hiddenDiv.style.dispaly='none'
hiddenDiv.style['margin-top']='0px'
title.style.transform='scale(1)'
pohto的class
.circletop:0px;width:50px;left:940px;position:absolute;z-index:1;height:50px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;transition: all 0.6s;
hid的class
#hidpadding-top:30px;top:30px;width:100px;height:100px;left:910px;position:absolute;background-color:red;
<img id='photo'class='circle' src='a.jpg'/>
<div id="hid" style="display:none;"></div> 参考技术B
div改成
<div id="two" onmouseover="a()" style="border: 1px solid #000000; width: 200px; height: 200px;"></div>追问但是移出div时想让它消失
追答那就在DIV上面再加个 onmouseout="b()"
本回答被提问者和网友采纳js 鼠标移入触发事件。多次触发。
鼠标移入li 里面触发需触发一个事件，但是当鼠标移动到li里面的div上时也会触发这个事件，等于重复的在触发
document.getElementById("fbox1").onmouseover=function()alert(123);
<li id="fbox1">
<div>
<div>
<img /><a href="#"></a></div>
<div >
<a href="#"></a></div>
</div>
</li>
mouseover和mouseout都是冒泡事件。mouseenter是ie独有的。我从网上扒了段代码
function isMouseLeaveOrEnter(e, handler)
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
参考技术B 这个当然了
因为li是父节点
包在最外层
当你鼠标要移动到里面内容是
一定要经过li
所以会触发事件
以上是关于css+js 触发之后边边出现一个div,且鼠标移到那个div时div不消失的主要内容，如果未能解决你的问题，请参考以下文章
比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.