Jquery + HTML действие при наведении мыши

zaffasoft

Постоялец
Регистрация
2 Янв 2007
Сообщения
51
Реакции
9
Задача: Поправить существующий скрипт, а именно, чтобы при наведении мыши на обьект менял цвет. На данный момент, все работает, только действие при нажатии на объект. Хотелось бы, данное действие выполнялось при наведении мыши.
Пытался сменить вместо .click на .onmouseover. Не получилось, может быть кто нибудь сталкивался с данной проблемой?

Здесь мой код.
PHP:
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 	
 
	<script type="text/javascript"> 
 var $j = jQuery.noConflict();
$j(document).ready(function(){ 
 
			$j("th.one").click( function(){ $j
				("#tt").removeClass("bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg1"); 
			});
 
			$j("th.two").click( function(){ $j
				("#tt").removeClass("bg1 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg2"); 
			});
 
			$j("th.three").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg3");
			});
			
			$j("th.four").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg4"); 
			});
 
			$j("th.five").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg5"); 
			});
 
			$j("th.six").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg6");
						});
			
			$j("th.seven").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg8 , bg9 , bg10 , bg11").addClass("bg7"); 
			});
 
			$j("th.eight").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg9 , bg10 , bg11").addClass("bg8");
							});
			
			$j("th.nine").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg10 , bg11").addClass("bg9"); 
			});
 
			$j("th.ten").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg11").addClass("bg10"); 
			});
 
			$j("th.eleven").click( function(){ $j
				("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10").addClass("bg11");
			
				 
			}); 
				
		});
 
	</script> 
	
	<style type="text/css"> 
	
		ul
		{
			list-style-type:none;
		}
		li
		{
			float:left;
		}
	
		.bg1 { background-color: #ffffff; }
		.bg2 { background-color: #e5e5e5; }
		.bg3 { background-color: #cccccc; }
		.bg4 { background-color: #b3b3b3; }
		.bg5 { background-color: #999999; }
		.bg6 { background-color: #808080; }
		.bg7 { background-color: #666666; }
		.bg8 { background-color: #4d4d4d; }
		.bg9 { background-color: #333333; }
		.bg10 { background-color: #1a1a1a; }
		.bg11 { background-color: #000000; }

		</style>
<table width="300" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <th scope="col" bgcolor="#FFFFFF" class="one"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#e5e5e5" class="two"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#cccccc" class="three"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#b3b3b3" class="four"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#999999" class="five"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#808080" class="six"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#666666" class="seven"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#4d4d4d" class="eight"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#333333" class="nine"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#1a1a1a" class="ten"><a href="#">&nbsp;</a></th>
    <th scope="col" bgcolor="#000000" class="eleven"><a href="#">&nbsp;</a></th>
  </tr>
</table>
 
проще "mouseenter" и "mouseleave", пример ниже

$(document).ready(function(){
$(".menu_link").mouseenter(function() {
$(this).addClass('superclass');
});
$(".menu_link").mouseleave(function() {
$(this).removeClass('superclass');
});
});
 
Назад
Сверху