首页 > 代码库 > 弹出层(动态实现弹出层的自由控制)

弹出层(动态实现弹出层的自由控制)

实现效果如图:

技术分享

 

鼠标悬浮到“张三”时,弹出张三信息,当鼠标仅从下面与张三结合部分移过来,弹出信息不消失,离开弹出框或离开张三,弹出框消失;

1.准备一个触发的超链接,一个弹出html(html标签)

  <a href="http://www.mamicode.com/#" class="info_name">张三</a>         

  <div class="info">张三</div>  //div样式自己调,div的外框与a标签尽量接近(防止事件中断)

2.写js弹出代码: 

      <script type="text/javascript">

var variable1=false;     //定义两个标量
var variable2=true;
$(function(){


$(".info_name").mouseover(function(){
$(".info").show();
variable1=false;
});

$(".info").mouseover(function(){
$(".info").show();
variable2=false;
});

$(".info_name").mouseleave(function(){
variable1=true;
if(variable1&&variable2){
$(".info").hide();
}
});
$(".info").mouseleave(function(){
variable2=true;
if(variable1&&variable2){
$(".info").hide();
}
});
});

</script>

 

上面的div可以动态的设置在a标签旁边

     

 

 

 

弹出层(动态实现弹出层的自由控制)