您的位置：首页 > 其它

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

2016-03-21 11:03 399 查看

定义和用法当鼠标指针穿过元素时，会发生 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航