2. 河豚號 > 生活百科 >

html鼠標懸停事件效果（css中hover的用法）

河豚俠 ? 生活百科 ? 2022-05-26 12:52:37 ?

事件之營(yíng)造事件

click觸發(fā)每一個(gè)匹配元素的click事件。

//將頁(yè)面內所有段落點(diǎn)擊后隱藏。

$(“p”).click( function () { $(this).hide(); });

mouseover當鼠標指針位于元素上方時(shí)，會(huì )發(fā)生 mouseover 事件。

//當鼠標指針位于元素上方時(shí)時(shí)，改變元素的背景色：

$(“p”).mouseover(function(){

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

});

mouseout當鼠標指針從元素上移開(kāi)時(shí)，發(fā)生 mouseout 事件。

//當鼠標從元素上移開(kāi)時(shí)，改變元素的背景色

$(“p”).mouseout(function(){

$(“p”).css(“background-color”,”#E9E9E4″);

});

bind()為每個(gè)匹配元素的特定事件綁定事件處理函數。

// 當每個(gè)段落被點(diǎn)擊的時(shí)候，彈出其文本。

$(“p”).bind(“click”, function(){

alert( $(this).text() );

});

事件之合成事件

hover()一個(gè)模仿懸停事件（鼠標移動(dòng)到一個(gè)對象上面及移出這個(gè)對象）的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。

$(“.class”).hover(

function () {

$(this).addClass(“hover”);

},

function () {

$(this).removeClass(“hover”);

}

);

事件之模擬事件

trigger();在每一個(gè)匹配的元素上觸發(fā)某類(lèi)事件。

//模擬客戶(hù)提交表單

$(“form:first”).trigger(“submit”);

//模擬客戶(hù)點(diǎn)擊

$(‘.cla’).trigger(‘click’);

//模擬元素獲得焦點(diǎn)

$(‘#text’).trigger(‘focus’);

表單操作

val()獲得或者設置匹配元素的當前值。

//獲取輸入框user的值

$(“input[name=’user’]”).val();

//修改輸入框user的值

$(“input[name=’user’]”).val(2323);

prop()修改、獲取表單屬性值

//獲取到屬性值

$(“input[name=’user’]”).prop(‘value’);

// 禁用

$(“input[name=’user’]”).prop(‘disabled’,true);

//選中

$(“input[name=’love’]”).prop(‘checked’,true);

jquery動(dòng)畫(huà)

show()顯示隱藏的匹配元素

//將選中的元素顯示出來(lái)

$(“p”).show();

//將選中的元素緩慢的顯示出來(lái)，有slow、normal、fast 或者是毫秒數

$(“p”).show(“slow”);

//回調函數，完成效果后執行這個(gè)函數

$(“p”).show(“fast”,function(){

$(this).text(“show time !”);

});

hide()隱藏顯示的元素

//將選中的元素隱藏出來(lái)

$(“p”).hide();

//將選中的元素緩慢的隱藏出來(lái)，有slow、normal、fast 或者是毫秒數

$(“p”).hide(“slow”);

//回調函數，完成效果后執行這個(gè)函數

$(“p”).hide(“fast”,function(){

alert($(this).text());

});

fadeIn()改變不透明度，直到顯示

fadeOut()改變不透明度，直到”消失”

slideUp()改變高度，直到隱藏

slideDown() 改變高度，直到完全顯示

animate()自定義動(dòng)畫(huà)

可以根據自己的需要進(jìn)行定制動(dòng)畫(huà)。

//同時(shí)執行

$(“.one”).animate({

width: “800px”,

height: “500px”,

fontSize: “20px”,

borderWidth:’10px’

}, 1000 );

//順序執行

$(“.one”).animate({

width:”800px”

},3000).animate({

height:”500px”

},2000).animate({

fontSize :”30px”

},2000);

stop()清除隊列，避免動(dòng)畫(huà)循環(huán)

$(‘.one’).hover(function(){$(this).stop().animate({width:”300px”,height:”400px”},1000);},function(){

$(this).stop().animate({width:”200px”,height:”200px”},1000);

});

其他動(dòng)畫(huà)：

toggle()slidToggle()

fadeTo()fadeToggle()

綜合應用于jquery選項卡、表單驗證、圖片輪播等等。

 

本文由網(wǎng)上采集發(fā)布，不代表我們立場(chǎng)，轉載聯(lián)系作者并注明出處：http://seensnowboarding.com/shbk/39091.html

相關(guān)推薦

聯(lián)系我們

在線(xiàn)咨詢(xún)：點(diǎn)擊這里給我發(fā)消息

微信號：15705946153

工作日：9:30-18:30，節假日休息

国产精品亚洲w码日韩中文|国产高清露脸孕妇系列|久久国语露脸国产精品|久久久777精品电影网影网|欧美高大丰满freesex