Como criar o efeito de focus em CSS para elementos de uma tabela

eljulio · 27/01/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/01/2010

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

Guixe · 27/01/2010

prueba poniendo #miestilo td:hover{

a ver si te sale 😉

eljulio · 27/01/2010

aisa disse:
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 disse:
prueba poniendo #miestilo td:hover{

a ver si te sale 😉

Asi lo hice y nada

este es el codigo de mi css:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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/01/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/01/2010

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

Pero nada.

Gracias

aisa disse:
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/05/2023

eljulio disse:
Cuando pasas el Mouse encima de ellos

:hover en el selector (class o id)

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

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

eljulio disse:
a un tono un poco mas claro.

eljulio disse:
#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 ...

Usuario eliminado 263618 · 02/08/2023

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

Como criar o efeito de focus em CSS para elementos de uma tabela

eljulio

javierc77

Guixe

eljulio

javierc77

eljulio

Puko

Usuario eliminado 263618

Tópicos similares