در این جلسه از آموزش های جی کوئری به معرفی و آشنایی بیشتر با یکی از پرکاربرد ترین عناصر زبان جی کوئری در طراحی افکت های زیبا بنام رویداد hover خواهیم پرداخت همین طور سعی می کنیم با آوردن مثال کاربردی، استفاده از رویداد hover را برای شما ملموس تر سازیم. با تیم طراحی سایت اصفهان وب یار همراه باشید.
در رویداد hover شما می توانید از وجود دو تابع به صورت همزمان در هنگام عبور موس از روی عنصر مورد نظر بهره مند شوید. تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروج موس از روی عنصر اجرا می شود.
به عبارت دیگر شما می توانید تعیین کنید زمانی که موس بر روی عنصر رفت چه اتفاقی رخ دهد و زمانی که موس از روی عنصر برداشته شد چه اتفاقی بیافتد. یعنی دو حالت را تعریف کنید.
selector : selector ، تعیین کننده عنصری است که می خواهیم رویداد hover هنگام عبور از روی آن اتفاق بیفتد . inFunction : این تابع زمانی اتفاق می افتد که موس بر روی عنصر مورد نظر وارد می شود . یعنی زمانی که رویداد mouseenter رخ می دهد . outFunction : این تابع زمانی اتفاق می افتد که موس از روی عنصر مورد نظر خارج می شود . یعنی زمانی که رویداد mouseleave رخ می دهد .
نکته مهم : اگر فقط یک تابع در دستور رویداد hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .
برای درک بهتر نحوه عملکرد رویداد hover به مثال پر کاربرد ساخت زیر منو توجه فرمایید:
فرض کنید ، یک منو داریم که با قرار گرفتن موس روی منو یک زیر منو بازمی شود و زمانی که موس از روی منو برداشته شد ، زیر منو حذف یا به عبارتی پنهان شود.
ابتدا منو را با کد html پیاده سازی می کینم:
<div class="menu">
<ul>
<li>
<span> منوی اصلی - خدمات وبیار </span>
<ul class="children">
<li>زیر منوی اول – طراحی سایت </li>
<li>زیر منوی دوم – طراحی فروشگاه اینترنتی </li>
<li>زیر منوی سوم – سئو سایت</li>
</ul>
</li>
</ul>
</div>
درکد بالا منوی ما یک گزینه دارد که در داخل آن عنصر span قرار گرفته و شامل زیر منویی با کلاس children است.در ابتدا باید با css زیر منو رو پنهان کنیم تا با جی کوئری و رویداد hover آن را نمایان سازیم.
.menu{
margin: 15px;
text-align: right;
direction: rtl;
}
.menu > ul{
margin: 0;
padding: 0;
list-style: none;
}
.menu > ul > li{
padding: 15px;
font: 13px/25px yekan;
}
.menu > ul > li span:hover{
cursor: pointer;
background-color:red;
}
.menu > ul > li .children{
display: none;
}
با استایل بالا سعی شد کمی منو را زیباتر کنیم و هم زیر منو را مخفی سازیم. اکنون با جی کوئری تعریف می کنیم که زمانی که موس روی منوی اصلی قرار گرفت زیر منو باز شود و زمانی که موس برداشته شد زیر منو بسته شود.
$(document).ready(function(){
$(".menu > ul > li > span").hover(function(){
$(".children").slideDown("slow");
},function(){
$(".children").slideUp("slow")
});
});
در کد بالا تعریف کردیم که با قرار گرفتن موس روی span عنصر children با رویداد slideDown بصورت کشویی باز شود و زمانی که موس از روی span برداشته شد، عنصر children با رویداد slideUp بصورت کشویی بسته شود.
سعی کنید یک بار این کد ها را از ابتدا مرور کرده وخود آنها را پیاده سازی کنید و یا حتی حالت های مختلفی بر روی توابع hover آن از جمله تغییر فونت، رنگ فونت و یا پس زمینه را امتحان کنید.
ممنون از همراهی شما وب یاری های گرامی.
فراموش نکنید تیم وب یار با وجود داشتن تجربه فراوان و کارشناسان زبده می تواند بهترین انتخاب برای طراحی سایت و سئو سایت شما باشد.
