css+js 触发之后边边出现一个div,且鼠标移到那个div时div不消失

var title = document.getElementById('photo');
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
.circle{top: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
#hid{padding-top:30px;top:30px;width:100px;height:100px;left:910px;position:absolute;background-color:red;}

div改成