jquery 之 $().hover(func1, funct2)使用方法

因为hover不是标准的事件，因此无法直接使用live进行处理，故使用以下方法代替，效果一样。


代码如下:

$("<SPAN style="COLOR: #0000ff">table tr</SPAN>").live({
<SPAN style="BACKGROUND-COLOR: #99ccff">mouseenter:</SPAN>
function()
{
<SPAN style="COLOR: #008000">//todo</SPAN>
},
<SPAN style="BACKGROUND-COLOR: #99ccff">mouseleave:</SPAN>
function()
{
<SPAN style="COLOR: #008000">//todo</SPAN>
}
});

在循环输出的<div>中，只针对某个<div>下的内容进行处理的时：可以使用$(this).find()来实现:


代码如下:

<body>
<div class="<SPAN style="COLOR: #0000ff">water</SPAN>">
<div class="<SPAN style="COLOR: #0000ff">action</SPAN>" style="<SPAN style="COLOR: #3366ff">display:none</SPAN>">
<a href="#"><div class="left">{lang user/repick}</div></a>
<a href="#"><div class="right">{lang user/reply}</div></a>
</div>
</div>
<div class="<SPAN style="COLOR: #0000ff">water</SPAN>">
<div class="<SPAN style="COLOR: #0000ff">action</SPAN>" style="<SPAN style="COLOR: #3366ff">display:none</SPAN>">
<a href="#"><div class="left">{lang user/repick}</div></a>
<a href="#"><div class="right">{lang user/reply}</div></a>
</div>
</div>
<div class="<SPAN style="COLOR: #0000ff">water</SPAN>">
<div class="<SPAN style="COLOR: #0000ff">action</SPAN>" style="<SPAN style="COLOR: #3366ff; BACKGROUND-COLOR: #ffffff">display:none</SPAN>">
<a href="#"><div class="left">{lang user/repick}</div></a>
<a href="#"><div class="right">{lang user/reply}</div></a>
</div>
</div>
<div class="<SPAN style="COLOR: #0000ff">water</SPAN>">
<div class="<SPAN style="COLOR: #0000ff">action</SPAN>" style="<SPAN style="COLOR: #3366ff">display:none</SPAN>">
<a href="#"><div class="left">{lang user/repick}</div></a>
<a href="#"><div class="right">{lang user/reply}</div></a>
</div>
</div>

<script type="text/javascript">
$("<SPAN style="COLOR: #0000ff">.water</SPAN>").<SPAN style="COLOR: #800080">hover</SPAN>(
function (){
$(this).<SPAN style="COLOR: #800080">find</SPAN>("<SPAN style="COLOR: #0000ff">.action</SPAN>").show();
},
function (){
$(this).<SPAN style="COLOR: #800080">find</SPAN>("<SPAN style="COLOR: #0000ff">.action</SPAN>").hide();
}
)
</script>
</body>

赞 (0)

相关推荐

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • JQuery入门——移除绑定事件unbind方法概述及应用

    JQuery入门——移除绑定事件unbind方法概述及应用

    1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jQuery用unbind方法去掉hover事件及其他方法介绍

    今天遇到jquery怎么去掉hover的问题,最开始以为直接unbind("hover")就可以搞定,可是搞了半天都失败拉.百度也搜了很多关于jquery中对hover事件unbind,后还是在一个老外的博客上看到了正确的方法,现在爱微网拿出来共享网上所说的jquery取消hover事件有以下几种方法: 复制代码 代码如下: /* 这种方法是错误的 */ $(#hover_div).unbind(hover); /* 这种方法也是错误的 */ $(#hover_div).unbind(

  • jquery 之 $().hover(func1, funct2)使用方法

    因为hover不是标准的事件,因此无法直接使用live进行处理,故使用以下方法代替,效果一样. 复制代码 代码如下: $("<SPAN style="COLOR: #0000ff">table tr</SPAN>").live({ <SPAN style="BACKGROUND-COLOR: #99ccff">mouseenter:</SPAN> function() { <SPAN styl

  • jQuery实现hover合成事件的方法

    jQuery实现hover合成事件的方法

    本文实例讲述了jQuery实现hover合成事件的方法.分享给大家供大家参考.具体如下: jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • jQuery中hover方法和toggle方法使用指南

    jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 参数:     over (Function) : 鼠标移到元素上要触发的函数.     out (Function): 鼠标移出元素要触发的函数. 复制代码

  • jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果,一开始,表格透明度不变. 当我鼠标移动到第二排第三个单元格,其他单元格降低透明度. 解决方法 一开始,我用的是CSS实现方法,是下面这样 #table td{ opacity:0.5; } #table td:hover{ opacity:1; } 不过这样一开始进去的时候表格透明度就是0.5,看起来很不好.

  • jQuery实现删除li节点的方法

    jQuery实现删除li节点的方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta charset="utf-8"> <title></title> <style> ul { list-style: none; } li { line-height: 25px; margin-top: 3px; } li:hover { background-color: #ddd; } li.hover { backg

  • jquery live()重复绑定的解决方法介绍

    Query中.live()方法的使用方法 今天在写代码的时候遇到一个问题,直接上代码看:$(function(){           $(".file").live("click",function(){                    var task_name=$(this).text();                    $("#selecting tbody").append("<trclass=gradeA

  • 基于jQuery创建鼠标悬停效果的方法

    本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

  • php+jQuery+Ajax实现点赞效果的方法(附源码下载)

    本文实例讲述了php+jQuery+Ajax实现点赞效果的方法.分享给大家供大家参考,具体如下: 数据库设计 先准备两张表,pic表保存的是图片信息,包括图片对应的名称.路径以及图片"赞"总数,pic_ip则记录用户点击赞后的IP数据. CREATE TABLE IF NOT EXISTS `pic` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_name` varchar(60) NOT NULL, `pic_url` varchar(60

  • 完美解决jQuery的hover事件在IE中不停闪动的问题

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了N久,没有找到解决方法.在这里吐槽一下,百度太2了,收录的内容都没什么价值,最后还是在google找到了解决方法,下面就把这个jQuery的hover在IE中会导致不停闪动的解决方法教给大家. $("#category ul").find("li").each(

随机推荐