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

eljulio Seguir

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Oct 2009
Mensajes
276
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

Delta
Verificación en dos pasos desactivada
Desde
10 Sep 2009
Mensajes
572
Si te refieres al menu, yo creo que es el efecto hover en enlaces, que cambian la imagen de fondo.
 

Guixe

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
9 Jul 2009
Mensajes
898
prueba poniendo #miestilo td:hover{

a ver si te sale ;)
 

eljulio

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Oct 2009
Mensajes
276
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.

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.
 

Puko

Épsilon
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Dic 2022
Mensajes
758
Cuando pasas el Mouse encima de ellos
:hover en el selector (class o id)
toda la fila le cambia el color de fondo
:hover en el selector (class o id) + background
a un tono un poco mas claro.
#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 ...
2023-05-22_234056.jpg
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba