الفرق بين المراجعتين لصفحة: «jQuery/hover»
جميل-بيلوني (نقاش | مساهمات) هذه الصفحة من مساهمات عدنان أمزيان. |
لا ملخص تعديل |
||
| سطر 5: | سطر 5: | ||
=== القيم المعادة === | === القيم المعادة === | ||
يعيد | يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 14: | سطر 14: | ||
==== <code>handlerIn</code> ==== | ==== <code>handlerIn</code> ==== | ||
دالة من الشكل <code>Function( Event eventObject )</code>، وتمثل الدالة المراد تنفيذها عندما يدخل مؤشر الفأرة حيز العنصر. | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتمثل الدالة المراد تنفيذها عندما يدخل مؤشر الفأرة حيز العنصر. | ||
==== <code>handlerOut</code> ==== | ==== <code>handlerOut</code> ==== | ||
دالة من الشكل <code>Function( Event eventObject )</code>، وتمثل الدالة المراد تنفيذها عندما يخرج مؤشر الفأرة من حيز العنصر. | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتمثل الدالة المراد تنفيذها عندما يخرج مؤشر الفأرة من حيز العنصر. | ||
يربط التابع <code>.hover()</code> المعالجات المتعلقة بالحدثين <code>mouseenter</code> و <code>mouseleave</code>. يمكنك استعمال هذا التابع لتطبيق سلوك معين على عنصر ما خلال الفترة التي يكون فيها مؤشر الفأرة داخل العنصر. | يربط التابع <code>.hover()</code> المعالجات المتعلقة بالحدثين <code>mouseenter</code> و <code>mouseleave</code>. يمكنك استعمال هذا التابع لتطبيق سلوك معين على عنصر ما خلال الفترة التي يكون فيها مؤشر الفأرة داخل العنصر. | ||
| سطر 86: | سطر 86: | ||
=== القيم المعادة === | === القيم المعادة === | ||
يعيد كائنًا من النوع jQuery. | يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 95: | سطر 95: | ||
==== <code>handlerInOut</code> ==== | ==== <code>handlerInOut</code> ==== | ||
دالة من الشكل <code>Function( Event eventObject )</code> وتمثل الدالة المراد تنفيذها عندما يدخل أو يخرج مؤشر الفأرة من حيز العنصر. عندما يمرر للتابع <code>.hover()</code> دالة وحيدة، فسينفذ هذه الدالة للحدثين <code>mouseenter</code> و <code>mouseleave</code> معًا. هذا يسمح للمستخدم استعمال توابع jQuery الخاصة بالتبديل داخل المعالج أو الاستجابة بشكل مختلف داخله بناءًا على قيمة <code>event.type</code>. | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code> وتمثل الدالة المراد تنفيذها عندما يدخل أو يخرج مؤشر الفأرة من حيز العنصر. عندما يمرر للتابع <code>.hover()</code> دالة وحيدة، فسينفذ هذه الدالة للحدثين <code>mouseenter</code> و <code>mouseleave</code> معًا. هذا يسمح للمستخدم استعمال توابع jQuery الخاصة بالتبديل داخل المعالج أو الاستجابة بشكل مختلف داخله بناءًا على قيمة <code>event.type</code>. | ||
استدعاء التابع بالشكل <code>$(selector).hover(handlerInOut)</code> هو اختصارٌ إلى:<syntaxhighlight lang="javascript"> | استدعاء التابع بالشكل <code>$(selector).hover(handlerInOut)</code> هو اختصارٌ إلى:<syntaxhighlight lang="javascript"> | ||
| سطر 155: | سطر 155: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/hover/ صفحة التابع .hover() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/hover/ صفحة التابع .hover() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
المراجعة الحالية بتاريخ 09:31، 29 مايو 2018
يربط هذا التابع معالجًا واحدًا أو معالجين بالعناصر المطابقة لتُنفَّذ عندما يدخل ويخرج مؤشر الفأرة من حيز العناصر.
.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>