التابع ‎‎.hover()‎‎ في jQuery

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

يربط هذا التابع معالجًا واحدًا أو معالجين بالعناصر المطابقة لتُنفَّذ عندما يدخل ويخرج مؤشر الفأرة من حيز العناصر.

‎.hover( handlerIn, handlerOut )‎

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يربط هذا التابع معالجًا واحدًا أو معالجين بالعناصر المطابقة، لتُنفَّذ عندما يدخل ويخرج مؤشر الفأرة من حيز العناصر.

‎.hover( handlerIn, handlerOut )‎

أضيف مع الإصدار 1.0.

handlerIn

دالة من الشكل Function( Event eventObject )‎، وتمثل الدالة المراد تنفيذها عندما يدخل مؤشر الفأرة حيز العنصر.

handlerOut

دالة من الشكل Function( Event eventObject ‎)‎، وتمثل الدالة المراد تنفيذها عندما يخرج مؤشر الفأرة من حيز العنصر.

يربط التابع ‎.hover()‎ المعالجات المتعلقة بالحدثين mouseenter و mouseleave. يمكنك استعمال هذا التابع لتطبيق سلوك معين على عنصر ما خلال الفترة التي يكون فيها مؤشر الفأرة داخل العنصر.

استدعاء التابع بالشكل ‎$( selector ).hover( handlerIn, handlerOut )‎ هو اختصارٌ إلى:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
راجع صفحة التابع ‎ .mouseenter()‎والتابع ‎.mouseleave()‎ للمزيد من التفاصيل.

أمثلة

إضافة نمط خاص لعناصر القائمة عندما يمر عليها مؤشر الفأرة:
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>hover demo</title>
 <style>
 ul {
   margin-left: 20px;
   color: blue;
 }
 li {
   cursor: default;
 }
 span {
   color: red;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
 <li>Milk</li>
 <li>Bread</li>
 <li class="fade">Chips</li>
 <li class="fade">Socks</li>
</ul>
<script>
$( "li" ).hover(
 function() {
   $( this ).append( $( "<span> ***</span>" ) );
 }, function() {
   $( this ).find( "span:last" ).remove();
 }
);
$( "li.fade" ).hover(function() {
 $( this ).fadeOut( 100 );
 $( this ).fadeIn( 500 );
});
</script>
</body>
</html>
إضافة نمط خاص لخلايا الجدول عندما يمر عليها مؤشر الفأرة:
$( "td" ).hover(
 function() {
   $( this ).addClass( "hover" );
 }, function() {
   $( this ).removeClass( "hover" );
 }
);
لإلغاء ربط معالج الحدث في المثال أعلاه، استعمل السطر الآتي:
$( "td" ).off( "mouseenter mouseleave" );

‎.hover(handlerInOut)‎

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يربط هذا التابع معالجًا واحدًا بالعناصر المطابقة، ليُنفَّذ عندما يدخل أو يخرج مؤشر الفأرة من حيز العناصر.

‎.hover( handlerInOut )‎

أضيف مع الإصدار: 1.4.

handlerInOut

دالة من الشكل Function( Event eventObject )‎ وتمثل الدالة المراد تنفيذها عندما يدخل أو يخرج مؤشر الفأرة من حيز العنصر. عندما يمرر للتابع ‎.hover()‎ دالة وحيدة، فسينفذ هذه الدالة للحدثين mouseenter و mouseleave معًا. هذا يسمح للمستخدم استعمال توابع jQuery الخاصة بالتبديل داخل المعالج أو الاستجابة بشكل مختلف داخله بناءًا على قيمة event.type.

استدعاء التابع بالشكل ‎$(selector).hover(handlerInOut)‎ هو اختصارٌ إلى:
$( selector ).on( "mouseenter mouseleave", handlerInOut );
اطلع على صفحة التابع ‎.mouseenter()‎ والتابع ‎.mouseleave()‎ للمزيد من التفاصيل.   

أمثلة

انزلاق العنصر الأخ الذي يلي العنصر <li> إلى الأعلى أو الأسفل و تبديل صنفه عندما يمر مؤشر الفأرة عليه:
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>hover demo</title>
 <style>
 ul {
   margin-left: 20px;
   color: blue;
 }
 li {
   cursor: default;
 }
 li.active {
   background: black;
   color: white;
 }
 span {
   color:red;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
 <li>Milk</li>
 <li>White</li>
 <li>Carrots</li>
 <li>Orange</li>
 <li>Broccoli</li>
 <li>Green</li>
</ul>
<script>
$( "li" )
 .filter( ":odd" )
   .hide()
 .end()
 .filter( ":even" )
   .hover(function() {
     $( this )
       .toggleClass( "active" )
       .next()
         .stop( true, true )
         .slideToggle();
   });
</script>
</body>
</html>

مصادر