التابع .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>