$("li").hover(function(){
創(chuàng)新互聯(lián)建站是一家專業(yè)提供安遠(yuǎn)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為安遠(yuǎn)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
$(this).next("div").show();
}, function(){
$(this).next("div").hide();
});
首先回答是,不是必須是hover。
這個(gè)addClass里寫hover是因?yàn)橹暗腃SS類選擇器的名稱是hover(就是.hover ?{background:red};)。這個(gè)名稱可以改成別的。下邊給你一個(gè)可以工作的代碼:
html
head
titlehover?demo/title
script?src="http://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
有問題請(qǐng)追問~
方法說明:hover() 方法規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)
調(diào)用語法:$(selector).hover(inFunction,outFunction)
方法事例:當(dāng)鼠標(biāo)指針懸停在上面時(shí),改變 p 元素的背景顏色
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
jQuery提供一些方法(如:toggle)將兩種事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等
1、hover函數(shù)
hover(over,out)一個(gè)模仿懸停事件(鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象)的方法。這是一個(gè)自定義的方法,它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
參數(shù):
over
(Function)
:
鼠標(biāo)移到元素上要觸發(fā)的函數(shù)。
out
(Function):
鼠標(biāo)移出元素要觸發(fā)的函數(shù)。
復(fù)制代碼
代碼如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").hover(function(){
$(this).next().show();//
鼠標(biāo)懸浮時(shí)觸發(fā)
},function(){
$(this).next().hide();//
鼠標(biāo)離開時(shí)觸發(fā)
})
})
/script
2、toggle函數(shù)
toggle(fn,fn)
每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素,則觸發(fā)指定的第一個(gè)函數(shù),當(dāng)再次點(diǎn)擊同一元素時(shí),則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來刪除。
復(fù)制代碼
代碼如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().show();//
第一次點(diǎn)擊時(shí)觸發(fā)
},function(){
$(this).next().hide();//
第二次點(diǎn)擊時(shí)觸發(fā),之后不停的切換
})
})
/script
toggle()
方法切換元素的可見狀態(tài)。
如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。toggle()方法切換元素的可見狀態(tài)。
如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
所以上述的代碼還可以寫成:
復(fù)制代碼
代碼如下:
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樣式:
復(fù)制代碼
代碼如下:
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
小伙伴們是否對(duì)jQuery中常見的hover事件和toggle事件有了新的認(rèn)識(shí)了呢,希望本文能給大家?guī)硪恍椭?/p>
文章題目:關(guān)于hoverjquery的信息
網(wǎng)站網(wǎng)址:http://weahome.cn/article/dsdpoeg.html