תיאור: מקשר שני מטפלים לאלמנטים בהתאמה, שיתבצעו כשאר מצביע של עכבר נכנס ויוצא מתוך האלמנטים.
.hover( handlerIn(eventObject), handlerOut(eventObject) )
הוספה בגרסה: 1.0
handlerIn(eventObject)
פונקציה מתבצעת כאשר מצביע של עכבר נכנס לתוך האלמנט.
handlerOut(eventObject)
פונקציה מתבצעת כאשר מצביע של עכבר עוזב את האלמנט.
שיטה .hover()
מצרפת מטפלים עבור שני אירועים
mouseenter ו- mouseleave.
אנחנו יכולים להשתמש בו כדי פשוט להחיל התנהגות של אלמנט בזמן שעכבר נמצא בתוך האלמנט.
קריאה $(selector).hover(handlerIn, handlerOut) היא קיצור עבור:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
ראו דיון על .mouseenter() ו- .mouseleave() ליותר פרטים.
דוגמאות
דוגמה 1
מוסיף סגנון מסוים לרשימת הפריטים כאשר עוברים עליהם, נסו זאת:
דוגמה 1 - קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($(" ***"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function()
{
$(this).fadeOut(100);
$(this).fadeIn(500);
});
});
</script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
</body>
</html>
דוגמה 2
מוסיף סגנון מיוחד לתאי טבלה שעובר עליהם מצביע של עכבר, נסו זאת:
תוצאת הפעלה קוד לעיל:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
דוגמה 2 - קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
</body>
</html>
דוגמה 3
כדי להפסיק שימוש באירועים מדוגמה הקודמת:דוגמה 3 - קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
function unbind()
{
$("td").unbind('mouseenter mouseleave');
}
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
<input type="button" value="Click here to unbind"
onclick="unbind()" />
</body>
</html>
תיאור: מקשר מטפל יחיד לאלמנטים בהתאמה, שיתבצע כשאר מצביע של עכבר נכנס ויוצא מתוך האלמנטים.
.hover( handlerInOut(eventObject) )
הוספה בגרסה: 1.4
handlerInOut(eventObject)
פונקציה מתבצעת כאשר מצביע של עכבר נכנס לתוך האלמנט או עוזב אותו.
שיטה .hover(),
כאשר נשלחת פונקציה יחידה,
מפעילה מטפל עבור שני מטפלי אירועים
mouseenter ו- mouseleave.
זה מאפשר למשתמש להשתמש בשיטות העברה שונות בתוך המטפל.
קריאה $(selector).hover(handlerInOut) היא קיצור עבור:
$(selector).bind("mouseenter mouseleave",handlerInOut);
ראו דיון על .mouseenter() ו- .mouseleave() ליותר פרטים.
דוגמה
גורם להחלקה של אח הבא LI למעלה ולמטה על hover, ומעביר מחלקה.
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
דוגמה - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
li.active { background:black;color:white; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
});
</script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
</body>
</html>
האם מידע זה היה מועיל?
