21-01-2014, 08:32
|
|
|
חבר מתאריך: 20.08.07
הודעות: 116
|
|
עזרה בנושא סלקטורים ב- jquery
שלום,
אני מנסה ליצור טבלה בדף HTML רגיל שכאשר עוברים עם העכבר מעל כל תא - הרקע משתנה.
בעיקרון הצלחתי אבל רק ככלל החל על כל הדף - וזה כמובן אינו רצוי מפני שיש המון טבלאות שאינני מעוניין שיכילו את הכלל הזה.
לפיכך, אני מתקשה ליצור את התנאי הייעודי לטבלה שלי.
להלן הקוד הכללי. אשמח אם תוכלו לעזור לי לשנות אותו כך שהאנימציה תהייה ייחודית לטבלה הזו בלבד:
קוד:
<html>
<head>
<style type="text/css">
.table_round {
border-collapse: separate;
border-spacing: 0;
}
.td {
border: 1px solid #CCE6FF ;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
background-color:#EAF4FF;
direction:rtl;
vertical-align:top;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("td").hover(
function(){
$(this).animate({ backgroundColor: '#CCE6FF'}, 200);
},
function(){
$(this).animate({ backgroundColor: '#EAF4FF'}, 200);
}
);
});
</script>
<table style="width:700px;height:400px">
<tr><td class="td" >A</td><td class="td">B</td></tr>
<tr><td class="td">C</td><td class="td">D</td></tr>
</table>
</body>
</html>
|