رویداد ( ) 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!");
});