jquery 之 $().hover(func1, funct2)使用方法
更新時間：2012年06月14日 12:32:03 作者：
.hover(func1, func2) 的效果等效于： mouseenter(), mouseleave()
因為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>
}
});
在循環(huán)輸出的<div>中，只針對某個<div>下的內(nèi)容進行處理的時：可以使用$(this).find()來實現(xiàn):
<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>
復(fù)制代碼 代碼如下:
$("<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>
}
});
在循環(huán)輸出的<div>中，只針對某個<div>下的內(nèi)容進行處理的時：可以使用$(this).find()來實現(xiàn):
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
這篇文章主要介紹了jQuery中:contains選擇器用法,以實例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
這個是select版的，若想美化某些樣式是不支持得，大家可以使用div模擬版，下面小編給大家介紹下jQuery雙向列表選擇器select版，感興趣的朋友一起看看吧2016-11-11
jQuery對底部導(dǎo)航進行跳轉(zhuǎn)并高亮顯示的實例代碼
這篇文章主要介紹了jQuery對底部導(dǎo)航進行跳轉(zhuǎn)并高亮顯示的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
javascript與jquery中跳出循環(huán)的區(qū)別總結(jié)
本文是對javascript與jquery中跳出循環(huán)的區(qū)別進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery實現(xiàn)的鼠標響應(yīng)緩沖動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)的鼠標響應(yīng)緩沖動畫效果,涉及jQuery事件響應(yīng)、數(shù)值運算及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
bind() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)。這篇文章主要介紹了jQuery中的 bind用法,需要的朋友可以參考下2017-02-02
基于jQuery實現(xiàn)的當(dāng)離開頁面時出現(xiàn)提示的實現(xiàn)代碼
基于jQuery實現(xiàn)的當(dāng)離開頁面時出現(xiàn)提示的實現(xiàn)代碼，需要的朋友可以參考下。2011-06-06
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)頁換膚效果,結(jié)合完整實例形式分析了jQuery通過修改link標簽的href屬性值實現(xiàn)換膚效果的相關(guān)技巧,需要的朋友可以參考下2016-09-09
基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下2019-04-04
jQuery如何跳轉(zhuǎn)到另一個網(wǎng)頁 就這么簡單
這篇文章主要介紹了如何在jQuery中跳轉(zhuǎn)到另外一個網(wǎng)頁HTML，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12