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.
 

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

Gamma
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Dic 2022
Mensajes
399
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
 

Recoftom

Eta
Verificado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Verificado por Binance
Desde
14 Dic 2021
Mensajes
1.372
Cuando el HTML y CSS eran algo diferentes en esos años que ahora.
 

¡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