изменение цвета при наведение

[Ramshine]

Здравствуйте!!!

Собственно проблема такая: есть ячейка, в которой при наведении на которую мышкой изменяется фон, в этой ячейке есть ссылка, необходимо сделать так чтобы при наведении на ячеку менялся цвет ссылки. заранее спс за помощь. ниже прилагаю уже имеющийся код:

<!-- html -->
<table cellpadding="0" cellspacing="0">
	  <tr>
		   <td id="butL1" onMouseOver="this.style.background = 'red'" onMouseOut="this.style.background = 'blue'"><a href="#">Услуги</a></td>
	 </tr>
</table>

#butL1 a  {
	font-size:11px;
	color:#bad0e3;
	text-decoration:none;
}
#butL1 a:hover  {
	font-size:11px;
	color:#fff;
	text-decoration:none;
}

[Иван Шумов]

вот некроссбраузерное решение, ослик ругается(((

мне что-то самому стало интересно)

<style>
#butL1:hover{
background: red;
}
#butL1:hover a{
color:blue;
}
#butL1{
background: blue;
}
#butL1 a  {
	font-size:13px;
	color:#bad0e3;
	text-decoration:none;
}
#butL1 a:hover  {
	font-size:13px;
	color:#fff;
	text-decoration:none;
}
</style>
<table cellpadding="0" cellspacing="0">
	  <tr>
		   <td id="butL1" width=100 height=100><a href="#">Услуги</a></td>
	 </tr>
</table>

[Ramshine]

хотелось бы конечно и для ослика

[Иван Шумов]

просьба НЕ МУЛЬТИПОСТИТЬ... стоило вместо второго поста отредактировать предыдущий

[Ramshine]

<style>
#butL1:hover{
background: red;
}
#butL1:hover a{
color:blue;
}
#butL1.jshover a{
color:blue;
}
#butL1{
background: blue;
}
#butL1 a  {
	font-size:13px;
	color:#bad0e3;
	text-decoration:none;
}
#butL1 a:hover  {
	font-size:13px;
	color:#fff;
	text-decoration:none;
}

</style>

<script type="text/javascript">
  jsHover = function() {
	var hEls = document.getElementsByTagName("TD");
	for (var i=0, len=hEls.length; i<len; i++) {
	  hEls[i].onmouseover=function() { this.className+=" jshover"; }
	  hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
	}
  }
  if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

<table cellpadding="0" cellspacing="0">
	  <tr>
		   <td id="butL1" width=100 height=100><a href="#">Услуги</a></td>
	 </tr>
</table>

это чтобы ослик не ругался

[Иван Шумов]

ну, это любителям яваскриптов

[elfuvo]

html:

<table cellpadding="0" cellspacing="0">
	  <tr>
		   <td class=td_normal onMouseOver="over(this)" onMouseOut="out(this)"><a href="#">Услуги</a></td>
	 </tr>
</table>

JS:

function over(obj){
obj.className='td_hover';
}
function out(obj){
obj.className='td_normal';
}

CSS:

.td_hover{background-color:#ff0000}
.td_hover a{color:#ffffff}
.td_normal{background-color:#0000ff}
.td_normal a{color:green}

[gnomon]

Ramshine большое спасибо-все работает!просто супер=)

[homm]

Решение на HTML+CSS:

<style>
.td_normal a{display:block; background-color:#0000ff; color:green}
.td_normal a:hover{background-color:#ff0000;color:#ffffff}
</style>
<table cellpadding="0" cellspacing="0">
 <tr>
 <td class=td_normal><a href="#">Услуги</a></td>
 </tr>
</table>