Cómo crear el efecto de focus en CSS para elementos de una tabla

eljulio · 27 Ene 2010

saludos,

estoy trabajando en un sitio que quiero hacerle un efecto como :

Lo que quiero hacer y no he podido lograr es el efecto que tienen los servicios de la pagina (arriba de esta linea) cuando paso el Mouse por arriba, me parece que es un Focus y habia pensado hacer algo como esto:

#miestilo td:focus{
background-color:#elcolor;
}

Se supone que en mi Tabla tengo esto:
<table id="miestilo"><tr>
<td >el nombre de mi servicio</td>
</tr></table>

Pero por alguna razon no me funciona, ¿porqué será?

¿en que estoy fallando?

javierc77 · 27 Ene 2010

Si te refieres al menu, yo creo que es el efecto hover en enlaces, que cambian la imagen de fondo.

Guixe · 27 Ene 2010

prueba poniendo #miestilo td:hover{

a ver si te sale

eljulio · 27 Ene 2010

aisa dijo:
Si te refieres al menu, yo creo que es el efecto hover en enlaces, que cambian la imagen de fondo.

No es el Menu, en el contenido hay una imagen grande de Servicios de unas personas que están com oen un despacho, debajo de esa foto hay una lista de servicios que tienen una imagen en miniatura a la izquierda. Cuando pasas el Mouse encima de ellos a toda la fila le cambia el color de fondo a un tono un poco mas claro.

Guixe dijo:
prueba poniendo #miestilo td:hover{

a ver si te sale

Asi lo hice y nada

este es el codigo de mi css:

Insertar CODE, HTML o PHP:

#serind td{
	height:25pt;
	color:#FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#serind td.loservicios:hover{
	height:25pt;
	color:#000;
	font-family:Georgia, "Times New Roman", Times, serif;
}

Como los datos son dinamicos este es el codigo que utilizo en mi php:

Insertar CODE, HTML o PHP:

<H1>Servicios que ofrece nuestra Firma:</H1>
   <p><a href="registrar_marca.php"><img src="images/registrarMarca.gif" alt="Registrar Marca" width="139" height="36" border="0"/></a></p>
 <?php
$mysqldb->query("SELECT * FROM servicios  WHERE idioma=$idioma");
  
 if ($mysqldb->numRows()>0)
  { echo "<table  border='0' align='left' cellpadding='2' cellspacing='5' id='serind'>";
   $cont=0;
   while ($datos=$mysqldb->fetchObject())
       {  $img="";	    
		  if (file_exists("img_opciones/servicio_".$datos->id_servicio.".jpg")) $img="<img src='img_opciones/servicio_".$datos->id_servicio.".jpg' width='25' height='25'>";	
		  
		  		  	 
		 echo "<tr>
				 <td>$img</td><td class='loservicios'><a href='detalle_servicios.php?codigo=".$datos->id_servicio."&idioma_sel=".$idioma."'>".$datos->nombre."</a>
			  </td></tr>";
			 		
		$cont++;
		
	   }
	  echo "</table>"; 
	   
	}

esto ya me tiene sofocado.

javierc77 · 27 Ene 2010

Ok, ahora ya lo vi. Como dice guixe el td:hover deberia funcionar.

Si quieres ver como va mira esto

:hover pseudo-class

Espero sea de ayuda

eljulio · 27 Ene 2010

Gracias aisa, pero sigue sin funcionar, muy util el enlace que me mandaste.

Pero nada.

Gracias

aisa dijo:
Ok, ahora ya lo vi. Como dice guixe el td:hover deberia funcionar.

Si quieres ver como va mira esto

:hover pseudo-class

Espero sea de ayuda

Puko · 23 May 2023

eljulio dijo:
Cuando pasas el Mouse encima de ellos

:hover en el selector (class o id)

eljulio dijo:
toda la fila le cambia el color de fondo

:hover en el selector (class o id) + background

eljulio dijo:
a un tono un poco mas claro.

eljulio dijo:
#serind td{ height:25pt; color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; } #serind td.loservicios:hover{ height:25pt; color:#000; font-family:Georgia, "Times New Roman", Times, serif; }

:hover en el selector (class o id) + background con color diferente (color son para las letras, no para el fondo)

=

.loservicios:hover {
background: #ddd;
}

Previo ...

Recoftom · 2023-08-02T17:22:47-0600

Cuando el HTML y CSS eran algo diferentes en esos años que ahora.