jquery鼠標移入移出

mouseenter(進入)、mouseleave、mouseover(覆蓋)和mouseout是常用來判斷鼠標移出和移入的事件句柄，雖然功能上差不多，但是細節卻有不同的地方。

站在用戶的角度思考問題，與客戶深入溝通，找到平南網站設計與平南網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：做網站、成都做網站、企業官網、英文網站、手機端網站、網站推廣、域名與空間、網絡空間、企業郵箱。業務覆蓋平南地區。

mouseover和mouseout在父元素和其子元素都可以觸發，當鼠標穿過一個元素時，觸發次數得依子元素數量而言。

mouseenter和mouseleave只在父元素觸發，當鼠標穿過一個元素時，只會觸發一次。

mouseover和mouseout比mouseenter和mouseleave先觸發

因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用

jQuery鏈式調用、鼠標移入移出、輪播、鍵盤事件

style

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

script src="./jquery-1.12.4.js"/script

script

? ? /* jQuery的鏈式調用 */

? ? /* $('div').$('div').text('我是學生').css('color','red').attr({name:'zhangsan',age:30}) */

? ? /* 鏈式調用的原理jq里面的方法都會return this 把當前調用者return出去實現鏈式調用 */

? /* $('ul li').first().css('background','yellow').end().eq(1).css('background','red') */

? ? /* 獲取的只是content里面的距離,不包括padding margin border里面的距離 */

? ? /* 返回以像素為單位的top和left的坐標,僅對可見元素有效 */

? ? /* top和left值都會包括自己的margin和父元素border的值 */

? ? console.log($('div2').offset().top);

? ? console.log($('ul').width());

? ? console.log($('ul').height());

? ? /* offsetParent 返回最近的自己定位的祖先元素 */

? ? console.log($('div2').offsetParent());

? ? /* position() 返回第一個匹配元素相對于父元素的位置 */

? ? console.log($('div').position());

? /* scrollLeft([position]) 參數可選,設置返回匹配元素相對滾動條左側的偏移*/

? ? /* 設置滾動條的距離 */

? ? $(window).scrollLeft(100)

? ? /* 獲取滾動條的距離 */

? ? $(window).scroll(function(){

? ? ? ? console.log($(document).scrollLeft());

? ? })

/script

style

? ? .div1{

? ? ? ? width: 300px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid red;

? ? }

? ? .div2{

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: red;;

? ? }

/style

/head

body

div class="div1"

? ? div class="div2"

? /div

/div

script src="./jquery-1.12.4.js"/script

script

? ? /* mouseenter mouseleave 在進入子元素區域時不會觸發

? ? ? ?mouseover 和mouseout 會觸發 */

? ? /* $('.div1').mouseenter(function(){

? ? ? ? $(this).css('background','green')

? ? })

? ? $('.div1').mouseleave(function(){

? ? ? ? $(this).css('background','yellow')

? ? }) */

? ? /* 由mouseenter 和mouseleave組成 */

? ? $('.div1').hover(function(){

? ? ? ? $(this).css('background','yellow')

? ? ? ? console.log(1);

? ? })

/script

style

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

? script src="./jquery-1.12.4.js"/script

? script

? ? /* $('li:eq(0)').mouseenter(function(){

? ? ? ? $(this).css('background','red')

? ? })

? ? $('li:eq(0)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? }) */

? ? $('li').hover(function(){

? ? ? ? /* css('background','')不會改變元素原來bgc樣式 */

? ? ? ? $('li').first().css('background','red').siblings().css('background','')

? ? })

? ? $('li:eq(1)').mouseenter(function(){

? ? ? ? $(this).css('background','yellow')

? ? })

? ? $('li:eq(1)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? })

? /script

style

? ? .box{

? ? ? ? margin: 30px auto;

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid cyan;

? ? ? ? position: relative;

? ? }

? ? .img-list img{

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? display: block;

? ? ? ? position: absolute;

? ? ? ? left: 0;

? ? ? ? top: 0;

? ? }

/style

/head

body

div class="box"

? ? div class="img-list"

? ? ? ? img src="./imgs/1.jpg" alt=""

? ? ? ? img src="./imgs/2.jpg" alt=""

? ? ? ? img src="./imgs/3.jpg" alt=""

? ? ? ? img src="./img/4.jpg" alt=""

? ? /div

/div

button style="margin-left: 450px;" class="left"后退/button

button class="right"前進/button

script src="./jquery-1.12.4.js"/script

script

? ? /* 定時器 過2s 顯示一張圖 顯示最后一張圖的時候再跳回第一張 */

? ? /* let i = 0

? ? $('img').eq(0).show().siblings().hide();

? ? setInterval(function(){

? ? ? i++;

? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? } */

? ? ? /* 淡入淡出 */

? ? ? /* $('img').eq(i).fadeIn('slow').siblings().fadeOut('slow')

? ? },2000) */

? let i = 0;

? ? let timer = null

? ? $('img').eq(i).show().siblings().hide();

? ? /* 自動播放 */

? ? show();

? ? $('.left').click(function(){

? ? ? ? /* 先清空定時器 阻止自動播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i--;

? ? ? ? /* 防止減到-1找不到對應的圖片 */

? ? ? ? if(i == -1){

? ? ? ? ? i=$('img').length - 1

? ? ? ? }

? ? ? ? /* 展示當前對應的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續開始自動播放 */

? ? ? ? show();

? ? })

? ? $('.right').click(function(){

? ? ? ? /* 先清空定時器 阻止自動播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i++;

? ? ? ? /* 防止減到-1 找不到對應的圖片 */

? ? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? ? }

? ? ? ? /* 展示當前對應的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續開始自動播放 */

? ? ? ? show()

? ? ? ? /* 定時器 過兩秒 顯示一張圖 顯示最后一張圖的時候

? ? ? ? 再跳到第一張 */

? ? })

? ? function show(){

? ? ? ? timer = setInterval(function (){

? ? ? ? ? ? i++;

? ? ? ? ? ? if(i == $('img').length){

? ? ? ? ? ? ? ?i = 0

? ? ? ? ? ? }

? ? ? ? ? ? /* fadeIn 淡入 fadeOut淡出 */

? ? ? ? ? ? $('img').eq(i).fadeIn().siblings().fadeOut();

? ? ? ? },2000)

? ? }

/script

body

用戶名:input type="text"br

密碼: input type="password"

script src="./jquery-1.12.4.js"/script

script

? ? /* 按下鍵盤 */

? ? /* $('input[type=text]').keydown(function(){

? ? ? ? alert('我按下了')

? ? }) */

? /* 抬起鍵盤 */

? ? /* $('input[type=password]').keyup(function(){

? ? ? ? alert('我抬起了')

? ? }) */

? /* keypress 連續敲擊鍵盤 */

? ? /* $('input[type=text]').keypress(function(){

? ? ? ? alert('連續打字')

? ? }) */

? ? $(window).keyup(function(e){

? ? ? ? if(e.keyCode==13){

? ? ? ? ? ? alert('已提交')

? ? ? ? }

? ? })

/script

/body

前端 jQuery鼠標移入移出

mouseover() 鼠標進入（進入子元素也觸發）

mouseout() 鼠標離開（離開子元素也觸發）

mouseenter() 鼠標進入（進入子元素不觸發）

mouseleave() 鼠標離開（離開子元素不觸發）

網頁題目：jquery移入移出,js 移入移出
本文鏈接：http://vcdvsql.cn/article8/dsdggop.html

成都網站建設公司_創新互聯，為您提供定制網站、標簽優化、Google、品牌網站建設、域名注冊、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯