Comunidad PHPeros

Lenguajes => CSS => Mensaje iniciado por: mOrK en 09 de Diciembre de 2006, 22:32:40 pm

Título: "HOVER's"
Publicado por: mOrK en 09 de Diciembre de 2006, 22:32:40 pm
Hola, me temo que inaguro esta seccion  ;D ;D

Estoy utilizando CSS ultimamente en unas webs que hago cuando me aburro... XD y lo llevo bastante bien, no es muy complicado, pero hay una cosa que "se me resiste"....

Es el tema de los "hovers" en capas...

Por ejemplo, quiero hacer un estilo para una tabla, pero que cuando te pones encima de la tabla, mediante CSS, cambia de color, la letra, que si border y cosas así...

He probado aglo así: (pero nop va)


#capa {
  background: #000000;
  border: 1px solid #FF0000;
  }

#capa:hover {
  background: #FFFFFF;
  border: 1px solid #FF0000;
  }

//También algo así///

#capa a {
  background:  #000000;
  border: 1px solid #FF0000;
  }

#capa a:hover {
  background: #FFFFFF;
  border: 1px solid #FF0000;
  }


Ninguna de las dos me funciona :S:S

Ayuda!!!!

Saludos ;)

Título: Re: "HOVER's"
Publicado por: Keon en 11 de Diciembre de 2006, 15:37:38 pm
Esto donde se pone (en el editor)?? porque esto me parece que esto es PHP ¿no? no deberia ir en HTML
Título: Re: "HOVER's"
Publicado por: JuAnCHO en 11 de Diciembre de 2006, 17:35:24 pm
Esto donde se pone (en el editor)?? porque esto me parece que esto es PHP ¿no? no deberia ir en HTML
Es CSS. Y está en el foro correcto. No has leido el nombre del subforo donde te encuentras ? xD
Título: Re: "HOVER's"
Publicado por: Krosty en 11 de Diciembre de 2006, 22:29:29 pm
si es CSS, pero no tengo ni idea de como funciona
Título: Re: "HOVER's"
Publicado por: Ishamato en 11 de Diciembre de 2006, 23:38:19 pm
A ver.. yo se lo justo en este lenguaje pero prueba de poner esto, tansolo cambié un par de cosas..

Citar

<style type="text/css">
a:capa {
  background: #000000;
  border: 1px solid #FF0000;
  }

a:capa:hover {
  background: #FFFFFF;
  border: 1px solid #FF0000;
  }
</style>

También puedes probar con:
Citar

<style type="text/css">
.capa_tabla {
  background: #000000;
  border: 1px solid #FF0000;
  }

.capa:hover {
  background: #FFFFFF;
  border: 1px solid #FF0000;
  }
</style>

Si te funciona postealo jeje y si no.. no se  :-\
Título: Re: "HOVER's"
Publicado por: mOrK en 12 de Diciembre de 2006, 18:51:09 pm
no, no me funciona :S:S  :'( :'(
Título: Re: "HOVER's"
Publicado por: mOrK en 12 de Diciembre de 2006, 19:07:32 pm
No me va esos ejemplos, pero probando, he visto una combinacion pero que solo me funciona para TEXTOS (no toda la capa, que es lo que buscaba)

Obviamente, estará mal: ^^


.capa a {
  loquesea:equisde;
  loquesea:equisde;
    }

.capa a:hover {
  loquesea:equisde;
  loquesea:equisde;
    }

Como he dicho, solo me va para textos, pero es una ayuda ^^

Saludos.
Título: Re: "HOVER's"
Publicado por: naveda en 12 de Diciembre de 2006, 22:01:59 pm
Bueno creo recordar que la sintaxis para un efecto que se produce al situar el raton encima del enlace es la siguiente:

Código: [Seleccionar]
#nombrecapa a:hover {
color: #FFFFFF;
text-decoration: underline; //Efecto (en este caso subrayado)
}
Título: Re: "HOVER's"
Publicado por: mOrK en 12 de Diciembre de 2006, 23:37:17 pm
Creo que es lo mismo que he puesto yo, pero supongo que bien hecho xD

Título: Re: "HOVER's"
Publicado por: naveda en 13 de Diciembre de 2006, 18:52:25 pm
Tu problema era que no usabas una sintaxis correcta y por lo tanto no se entendia el codigo.
Me refiero...
Fondo a las letras? ==>background: #FFFFFF;

Ahora funciona?
Título: Re: "HOVER's"
Publicado por: mOrK en 13 de Diciembre de 2006, 21:17:48 pm
No, fondo a las letras no, eso ya lo se, pero lo que no se hacer es para ponerle fondo a la CAPA... algo tipo esto, por ejemplo, pero no exactamente:

http://www.13styles.com/css-menus/style2/

http://www.13styles.com/css-menus/style4/

Saludos.
Título: Re: "HOVER's"
Publicado por: Raken en 16 de Diciembre de 2006, 21:47:27 pm
Hola mOrk,

en primer lugar decir que la sentencia nombre:hover y similares, no funcionan bajo navegadores Internet Explorer. Por otro lado, para usarlo en las tablas, no puedes crear los estilos antes, sino formular el cambio en el momento que se crea la tabla. Es decir:

Código: [Seleccionar]
<table>
<tr>
<td onMouseOver="this.background.color=#000000;" bgcolor="#FFFFFF">
Hola
</td>
<tr>
</table>

Si no me equivoco, es una relación entre HTML y JavaScript, y no de CSS. ;)

EDIT: Me había parecido leer que necesitabas este resultado con las tablas (no con las capas). Ahí queda para el que lo quiera.  ;)
Título: Re: "HOVER's"
Publicado por: Krosty en 17 de Diciembre de 2006, 06:55:03 am
Raken no funciona ... ya lo prove
Título: Re: "HOVER's"
Publicado por: Raken en 17 de Diciembre de 2006, 18:53:14 pm
Lo puse de memoria y sin pensar demasiado.

En vez de :
Citar
this.background.color

Es:
Citar
this.bgColor

------------------

<table>
<tr>
<td onMouseOver="this.bgColor='#000000';" bgcolor="#FFFFFF">
Hola
</td>
<tr>
</table>


Título: Re: "HOVER's"
Publicado por: mOrK en 18 de Diciembre de 2006, 07:56:44 am
No tira.... :S
Título: Re: "HOVER's"
Publicado por: mOrK en 23 de Diciembre de 2006, 17:59:31 pm
Bueno, estube buscando y ya se cómo es:

#capa a {
display:block; // Esto sirve para que no ocupe sólamente lo que ocupa el texto en cuestion.
width:100%; // Para que ocupe toda la tabla
background-color: #333333; }

#capa a:hover {
background-color: #666666; }


Si no lo entendeis, copiad y pegad y probadlo, id quitando cosas y veréis para que sirven, para quien no lo entienda.

Saludos.
Título: Re: "HOVER's"
Publicado por: Raken en 24 de Diciembre de 2006, 04:58:54 am
Lo mejor es que eso es lo que pusiste en tu primer post diciendo que ya lo habías probado y que no te funcionaba... sin comentarios.

NOTA: La propiedad hover no funciona en I.Explorer. (Al menos que yo sepa en versiones 6x e inferiores)
Título: Re: "HOVER's"
Publicado por: mOrK en 24 de Diciembre de 2006, 10:33:47 am
Tu simpatía me alegra el día ;)

Si, es cierto, y que? Lo que pasa que en el HTML puse "class" en vez de "id", me he dado cuenta y lo pongo, así que la simpatía esa que muestras, se la guardas para otro. Si te crees superior a todos, enhorabuena, aqui estamos para aprender, no para que una persona nos pise hablando así. Suerte.

Hablando del código, en el primero que puse, no ponía nada de "block" o del "width", pero bueno ;)


PD: En el IE si que se ve, lo he porbado, criticame ;)
Título: Re: "HOVER's"
Publicado por: naveda en 24 de Diciembre de 2006, 14:11:22 pm
No quiero dis*****s, TEMA CERRADO

Problema RESUELTO :D