jquery鼠标移上div切换

偏执的太偏执、 2022-07-21 02:17 246阅读 0赞

样式：

  1. .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:auto; background:#eee;}
  2. .tb_box span{display:block; padding:20px;  width:120px; margin:0 auto; text-align:center; border:solid 1px #ddd; }
  3. .tb_box span.t2{border:solid 1px #F1080C;}

页面结构：

  1. <div class="tb_box">
  2.         <span class="t1">
  3.             产品详细
  4.         </span>
  5.         <span class="t2">
  6.             <a href="#">确认</a>
  7.         </span>
  8. </div>

js代码：

  1. var is_block=false;
  2.         var t2=$(".tb_box span.t2").hide();
  3.         $(".tb_box span.t1").mouseover(function(){
  4.             $(this).hide(); 
  5.             t2.show();
  6.         });
  7.         t2.mouseover(function(){
  8.             is_block=true;   
  9.             $(this).show(); 
  10.             $(".tb_box span.t1").hide(); 
  11.         });        
  12.         t2.mouseout(function(){
  13.             if(is_block){
  14.                 $(this).hide(); 
  15.                 $(".tb_box span.t1").show(); 
  16.                 is_block=false;
  17.             }   
  18.         });

发表评论

表情：
评论列表 （有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读