ඉන්ටෙර්නෙට්‌ එක්‌ස්‌ප්ලොරර් 6 වල links හරුනුකොට වෙනත් element සදහා :hover pseudo-class එක වැඩ කරන්නේ නැහැ.
උදාහරණය 1 : firefox හි paragraph සදහා hover වැඩ කලත් ie6 හි වැඩ කරන්නේ නැහැ.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE hover test</title>
<style>
#wrapper { margin:20px auto; width:600px; }
.hover-me:hover { background:#eee; }
</style>
</head>
<body>
<div id="wrapper">
<a class="hover-me" href="#">test link</a>
<p class="hover-me">test paragraph</p>
</div>
</body>
</html>
ඉහත දැක්‌වෙන උදාහරණයේ හි link එක සදහා අලු පැහැති පසුබිම් වර්නයක්‌ mouse over කිරීමේදී දර්ශනය වූවත් paragraph (p) එක සදහා එය අපට අවශ්‍ය පරිදි ක්‍රියා කරන්නේ නැහැ.
මෙය හරි ආකාරව ක්‍රියාත්මක කර ගැනීම සදහා අපි jQuery භාවිතා කරමු.
අපි මෙහිදී කරන්නේ mouse over කරන අවස්‌තාවෙදී එම අදාල element එකට class එකක්‌ එකතු කිරීමයි.
උදාහරණය සදහා මම යොදා ගන්නේ hover-frosure class එකයි. එහි පසුබිම් වර්නය සදහ අලු පැහැය css මගින් යොදා තිබෙනවා.
.hover-forsure { background:#eee; }
දැන් අපි jQuery addClass මගින් hover වීමේදි hover-me paragraph class එක සදහා hover-forsure class එක යොදමු.
$(document).ready(function(){
$('.hover-me').hover(function() {
$(this).addClass('hover-forsure');
}, function() {
$(this).removeClass('hover-forsure');
});
});
උදාහරණය 2: දැන් IE6 එකෙත් hover වැඩ කරනවා!
සම්පූර්ණ කේත
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover Demo</title>
<style>
#wrapper { margin:20px auto; width:600px; }
.hover-forsure { background:#eee; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hover-me').hover(function() {
$(this).addClass('hover-forsure');
}, function() {
$(this).removeClass('hover-forsure');
});
});
</script>
</head>
<body>
<div id="wrapper">
<p class="hover-me">test hover 2</p>
</div>
</body>
</html>
Posts
No comments:
Post a Comment