css+js 触发之后边边出现一个div,且鼠标移到那个div时div不消失
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#...
<!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> 展开
<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> 展开
2个回答
展开全部
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;}
<img id='photo'class='circle' src='a.jpg'/>
<div id="hid" style="display:none;"></div>
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;}
<img id='photo'class='circle' src='a.jpg'/>
<div id="hid" style="display:none;"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div改成
<div id="two" onmouseover="a()" style="border: 1px solid #000000; width: 200px; height: 200px;"></div>
追问
但是移出div时想让它消失
追答
那就在DIV上面再加个 onmouseout="b()"
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
