031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » رویداد hover در جی کوئری-درس نهم

رویداد hover در جی کوئری-درس نهم

تاریخ:۲۸ام شهریور ۱۳۹۶
رعنا زارع
0
19

آموزش جی کوئری :

در این جلسه از آموزش های جی کوئری به معرفی و آشنایی بیشتر با یکی از پرکاربرد ترین عناصر زبان جی کوئری در طراحی افکت های زیبا بنام رویداد hover خواهیم پرداخت همین طور سعی می کنیم با آوردن مثال کاربردی، استفاده از رویداد hover  را برای شما ملموس تر سازیم . با وبیار همراه باشید.

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

در رویداد hover  شما میتوانید از وجود دو تابع به صورت همزمان در هنگام عبور موس از روی عنصر مورد نظر بهره مند شوید. تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروج موس از روی عنصر اجرا می شود .

به عبارت دیگر شما میتوانید تعیین کنید زمانی که موس  بر روی عنصر رفت چه اتفاقی رخ دهد و زمانی که موس از روی عنصر برداشته شد  چه اتفاقی بیافتد . یعنی دو حالت را تعریف کنید.

شکل کلی استفاده از این متد به شرح زیر است :

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

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  آن از جمله تغییر فونت ، رنگ فونت و یا پس زمینه را امتحان کنید.

ممنون از همراهی شما وبیاری های گرامی .

فراموش نکنید تیم وبیار با وجود داشتن تجربه فراوان و کارشناسان زبده می تواند بهترین انتخاب برای طراحی سایت و سئوسایت شما باشد.

درباره نویسنده :
رعنا زارع

مطالب مرتبط

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان حراجی مبل طراحی سایت فروش و تبلیغات مبلمان سایت حراجی مبل ، با طراحی ساده و زیبای خود ، به معرفی انواع و دسته بندی های مبلمان پرداخته و با درج گالری عکس ها ، قیمت و جنس مبلمان ، محصولات خود را برای کاربران به نمایش گذاشته است. […]

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20 طراحی فروشگاه اینترنتی تحریر20 با خدمات فروش و عرضه انواع لوازم تحریر در اصفهان ، اخیرا توسط تیم طراحی سایت وب یار با رعایت تمامی المان های استاندارد سئو در آن طراحی شده است. طراحی گرافیکی کاملا اختصاصی و امکانات پیشرفته ای که در طراحی فروشگاه اینترنتی تحریر20 قرار گرفته است ، باعث […]

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته طراحی فروشگاه اینترنتی پخش پسته ، ارائه دهنده ی محصولات مغزیجات و خشکبار می باشد که ساختار استاندارد آن برای هر نوع طراحی فروشگاه اینترنتی مناسب است. یعنی شما با این قالب اختصاصی از تیم طراحی سایت وب یار قادرید هر نوع سایت فروشگاه اینترنتی را روی آن بالا بیاورید. […]

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور یکی از نمونه کارهای طراحی سایت وب یار، طراحی سایت آموزشی AZ کنکور می باشد که زمینه ی کاری آن مشاوره تحصیلی، برگذاری کلاس های آنلاین، آزمون آنلاین و فروش محصولات آموزشی است. اصول سئو در کدنویسی طراحی سایت AZ کنکور رعایت شده است همچنین در طراحی گرافیک قالب سایت […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید