mouseenter mouseleave 鼠标经过div边框变色，点击跳到相应链接

来源：互联网发布：万人斩vpn软件编辑：程序博客网时间：2024/06/15 05:33
定义和用法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 
事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

亲自试一试：mouseenter 与 mouseover 的不同

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });
  $("#btn1").click(function(){
    $("p").mouseenter();
  });  
  $("#btn2").click(function(){
    $("p").mouseleave();
  }); 
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseenter 事件</button><br />
<button id="btn2">触发段落的 mouseleave 事件</button>
</body>
</html>

//鼠标经过div边框变色，点击跳到相应链接
<script src="/js/jqbase.js" type="text/javascript"></script>
<script>
$(function(){
    $(".grid,.column,.inviterbox").mouseenter(function(){
        $(this).addClass("on");
        $(this).mouseleave(function(){
            $(this).removeClass("on");
        });
    });
    $(".column").click(function(){
        window.location.href=$(this).attr('href');
    });
})
</script>

<div id="pinzhicolumn" class="column" href="{dede:type typeid='6'}[field:typelink/]{/dede:type}">
        <div class="content">
            {dede:sql sql='Select content from #@__arctype where id=6' }
  [field:content/]
 {/dede:sql}
        </div>
        <div class="pic">
            <img src="/images/index_pinzhi_img.jpg" height="395" width="467">
        </div>
    </div>
0 0