رویداد hover در جی کوئری

8 / 10 از 6 کاربر

رویداد ( ) hover در jQuery 

در این بخش از آموزش JQuery ، رویداد hover را در طراحی سایت  شرح میدهیم. 

رویداد ( ) hover ، دو تابع را تعیین می کند که در هنگام عبور موس از روی عنصر مورد نظر ، اجرا می شوند . تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروح عنصر از روی عنصر اجرا می شود .
این رویداد هر دو رویداد mouseenter و رویداد mouseleave را فعال می کند .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).hover ( inFunction , outFunction ) ;

selector : selector ، تعیین کننده id عنصری است که می خواهیم رویداد ( ) hover در هنگام عبور از روی آن اتفاق بیفتد . 

inFunction : این تابع زمانی اتفاق می افتد که رویداد mouseenter رخ می دهد . یعنی زمانی که موس بر روی عنصر مورد نظر وارد می شود . 
outFunction : این تابع زمانی اتفاق می افتد که رویداد mouseleave رخ می دهد . یعنی زمانی که موس از روی عنصر مورد نظر خارج می شود . 
نکته مهم : اگر فقط یک تابع در دستور رویداد ( ) hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .

$("#p1").hover(function(){
       alert("You entered p1!");
},
function(){
       alert("Bye! You now leave p1!");
});

این رویداد دو function دارد . و این دو ترکیبی از رویدادهای mouseenter(), mouseleave() هستند . اولین تابع زمانیکه ماوی وارد عنصر html می شود اجرا می شود و دومین تابع زمانیکه اشاره گر عنصر را ترک می کند .

 مثال زیر کاربرد رویداد hover را نشان میدهد :

$("#p1").hover(function(){
       alert("You entered p1!");
},
function(){
       alert("Bye! You now leave p1!");
});

فاطمه : تشکر!
14 1
عالیییییی بوووووود خیلی به دردم خورد! مرسی :)
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*
نویسنده : بهاره شکری
تاریخ انتشار : 29/05/1392
تعداد بازدید : 5115