关于hoverjquery的信息

jquery hover 的写法

$("li").hover(function(){

创新互联建站是一家专业提供安远企业网站建设,专注与成都网站设计、成都网站建设、H5开发、小程序制作等业务。10年已为安远众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

$(this).next("div").show();

}, function(){

$(this).next("div").hide();

});

jquery的hover的用法

首先回答是,不是必须是hover。

这个addClass里写hover是因为之前的CSS类选择器的名称是hover(就是.hover  {background:red};)。这个名称可以改成别的。下边给你一个可以工作的代码:

html

head

titlehover demo/title

script src="//code.jquery.com/jquery-1.10.2.js"/script

style

.myStyle {

background: red

}

;

/style

/head

body

table border="1"

tr

tdrow 1, cell 1/td

tdrow 1, cell 2/td

/tr

tr

tdrow 2, cell 1/td

tdrow 2, cell 2/td

/tr

/table

script

$("td").hover(function() {

$(this).addClass("myStyle");

}, function() {

$(this).removeClass("myStyle");

});

/script

/body

/html

有问题请追问~

jquery触发hover事件的参数怎么用

方法说明:hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数

调用语法:$(selector).hover(inFunction,outFunction)

方法事例:当鼠标指针悬停在上面时,改变 p 元素的背景颜色

$("p").hover(function(){

$("p").css("background-color","yellow");

},function(){

$("p").css("background-color","pink");

});

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

jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等

1、hover函数

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

参数:

over

(Function)

:

鼠标移到元素上要触发的函数。

out

(Function):

鼠标移出元素要触发的函数。

复制代码

代码如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").hover(function(){

$(this).next().show();//

鼠标悬浮时触发

},function(){

$(this).next().hide();//

鼠标离开时触发

})

})

/script

2、toggle函数

toggle(fn,fn)

每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

可以使用unbind("click")来删除。

复制代码

代码如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){

$(this).next().show();//

第一次点击时触发

},function(){

$(this).next().hide();//

第二次点击时触发,之后不停的切换

})

})

/script

toggle()

方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。toggle()方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

所以上述的代码还可以写成:

复制代码

代码如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){

$(this).next().toggle();

},function(){

$(this).next().toggle();

})

})

/*$(function(){

$("#panel

h5.head").click(function(){

$(this).next().toggle();

})

})*/

/script

还可以添加一些css样式:

复制代码

代码如下:

style

type="text/css"

.highlight{

background:#FF3300;

}

/style

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){//配合css样式使用

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

/script

小伙伴们是否对jQuery中常见的hover事件和toggle事件有了新的认识了呢,希望本文能给大家带来一些帮助。


网站标题:关于hoverjquery的信息
分享地址:http://scjbc.cn/article/dsdpoeg.html

其他资讯