Foros del Web » Creando para Internet » CSS »

Problema con propiedad hover

Estas en el tema de Problema con propiedad hover en el foro de CSS en Foros del Web. Buenas, estoy haciendo mis primeros pasos con CSS, para empezar a crear mis diseños. El tema es que hice un menú horizontal simple. Le coloqué ...
  #1 (permalink)  
Antiguo 06/04/2011, 15:52
 
Fecha de Ingreso: agosto-2010
Mensajes: 100
Antigüedad: 7 años, 3 meses
Puntos: 2
Problema con propiedad hover

Buenas, estoy haciendo mis primeros pasos con CSS, para empezar a crear mis diseños.
El tema es que hice un menú horizontal simple. Le coloqué una imagen de fondo creada con photoshop, el menú no pasa de los 13px de alto.
Le coloque los links a las demas secciones de la página (desde el html) y quedo bien.
Después se me ocurrió colocarle un efecto hover a las opciones del menú. Y es lo que no me funciona, cuando paso el mouse el efecto no se activa. Será porque estoy usando una imagen de fondo en vez de color plano?.
Desde ya muchas gracias, abajo dejo escrito como definí el css:

Código:
@charset "utf-8";
/* CSS Document */

/* Margin : espacio entre contenedores o espacio contra el margen del navegador */
/* Padding : espacio entre un elemento (texto, imagen, o algo más) contra los bordes del contenedor */

* {padding: 0px; margin: 0px} /* mejora la visualizacion en distintos navegadores */

body{
	background-color: #FFF;
	/* background-image: url(img/fondo.png);
	background-repeat: repeat-x; */ 
}

#sombra{
	width: 900px;
	height: 650px;
	margin: auto;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-box-shadow: 0 0 5px 5px #888; /* mozilla */
	-webkit-box-shadow: 0 0 5px 5px#888; /* chrome */
	box-shadow: 0 0 5px 5px #888;
}

#page{
	background-color:#FFF;
	width: 900px;
	height: 650px;
	margin: auto;
	-moz-border-radius: 7px;  /*borde redondeado para navegadores Mozilla (Iceweasel, Firefox, Chameleon, otros..)*/
	-webkit-border-radius: 7px; /* borde redondeado para Safari y Chrome */
						   /*en navegadores Opera e IE no funciona esta opcion */
}

#header{
	widht: 66%;
	margin: auto;
	text-align:right;
	padding-right: 1%;
	height: 15%;
}

#logo{
	width: 34%;
	float:left;
}

#corniza{
	width: 100%;
	height: 4%;
	background-image:url(img/menu.png)
}

#contenido{
	width: 100%;
	height: 77%;
}


#pie{
	background-image: url(img/pie.png);
	width: 100%;
	height: 4%;
}


/* TEXTOS */

h1{
	text-align: center;
	/*padding-left: 27%;*/
	padding-top: 2%;
}

/* texto del header y pie de pagina */
h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}

/* opciones del menu */
h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#FFF;
	padding-top: 0.5%;
	padding-left: 1%;
	
}

ul{
	list-style-type: none;
}

li{
	padding-top: 0.5%;
	padding-left: 1%;
	display: inline;
	float: left;
}

p{
	font-family:Verdana, Geneva, sans-serif;
}

p.menu{
	font-size:12px;
	color:#FFF;
}

p.contenido{
	padding-top: 1%;
	padding-left: 1%;
	font-size: 14px;
	color:#000;
}

p.head{
	font-size:10px;
	color:#000;
	font-weight: bold;
}
	
/* ENLACES */

/* links del menu */

a.plain{
	text-decoration:none;
}
	
a:hover{
	background-image:url(img/hover.png); 
}
  #2 (permalink)  
Antiguo 06/04/2011, 17:43
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Problema con propiedad hover

Ayudaría que pongas el código HTML.

De todas maneras, estás definiedo la propiedad hover para el html, y no para el cuadro de tu menu. Supongo que funcionará si pones:

#corniza a:hover{
background-image:url(img/hover.png);
}
  #3 (permalink)  
Antiguo 06/04/2011, 18:51
 
Fecha de Ingreso: agosto-2010
Mensajes: 100
Antigüedad: 7 años, 3 meses
Puntos: 2
Respuesta: Problema con propiedad hover

kike2lucas gracias por la respuesta, es que lo hice medio a las apuradas, ahora trato de pasar en limpio y poner las cosas lo más detalladas posibles.
Hice algunos retoques en un documento nuevo para empezar de 0 y no lanzarme a hacer algo más complejo a la hora de aprender.

Cree el siguiente CSS:
Código:
#page{
	background-color:#FFF;
	width: 900px;
	height: 650px;
	margin: auto;
}

#header{
	widht: 100%;
	margin: auto;
	text-align:right;
	padding-right: 1%;
	height: 15%;
}

#menu{
	width: 100%;
}

#contenido{
	width: 100%;
	height: 77%;
}


#pie{
	width: 100%;
	height: 4%;
}

ul{
	list-style-type: none; /* saca las viñetas */
}

li.menu{
	padding-top: 0.5%;
	padding-left: 1%;
	float: left;
}

p.menu{
	font-size:12px;
	color:#FFF;
}

a.menu{
	text-decoration:none;	
}
	
a:hover{
	color:#003;
}
La parte en cuestión del html es la siguiente:
Código:
    <div id="contenido">
		<p class="contenido">Aca va el contenido.</p>
           <div id="menu">
			<ul>
	      		<li class="menu"><a class="menu" href="home.html"><p class="menu">Inicio</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">¿Qui&eacute;nes Somos?</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">¿C&oacute;mo llegar?</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">Contacto</p></a></li>
			</ul>
    	</div>
    </div>
A priori, el hover sobre el texto del link me funciona. Ahora para lograr que cambie el color de fondo, o que me dibuje un borde para el <li> todavía no le puedo encontrar la vuelta :(.
Kike2lucas, cómo aplicaría en este nuevo CSS lo que me sugeriste ? y en el html como lo invoco ? en el CSS debo definir #menu{...} y #menu a:hover{...} ?.

Saludos y gracias.
  #4 (permalink)  
Antiguo 06/04/2011, 18:57
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con propiedad hover

amigo, simplifique su html asi como lo tiene es algo sucio
Cita:
<li class="menu"><a class="menu" href="#"><p class="menu">Contacto</p></a></li>
coloque solo
Cita:
<li class="menu"><a href="#">Contacto</a></li>
y en su css algo como por ejemplo:

Código CSS:
Ver original
  1. li.menu a{display:block;padding:3px 8px;font-size:12px;color:#fff;text-decoration:none;}
  2. li.menu a:hover{color:#003;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 06/04/2011, 19:38
 
Fecha de Ingreso: agosto-2010
Mensajes: 100
Antigüedad: 7 años, 3 meses
Puntos: 2
Respuesta: Problema con propiedad hover

Ag666, tus modificaciones han funcionado de 10. Una última consulta, si yo quisiera que solo se ilumine el <li> afectado por el hover, con el background-color no me funcionaria, debería agregar una "capa" por <li> ??.
  #6 (permalink)  
Antiguo 06/04/2011, 20:32
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con propiedad hover

el código como lo coloque afecta solo al <li><a> sobre el que te ubiques... no comprendo del todo tu pregunta, igual si lo que necesitas es que se ilumine el <li> sin tener un enlace deberás aplicar
Código CSS:
Ver original
  1. li:hover{}/*para todos los <li> */
  2. li.menu:hover{}/*para todos los <li> con la clase menú*/
  3. #menu li:hover{}/*para todos los li que estén dentro del ID menú*/

que por cierto ahora que vuelvo a ver tu código bastaría con colocar

Código HTML:
Ver original
  1. <div id="menu">
  2.    <ul>
  3.       <li><a href="home.html">Inicio</a></li>
  4.       <li><a href="#">¿Qui&eacute;nes Somos?</a></li>
  5.       <li><a href="#">¿C&oacute;mo llegar?</a></li>
  6.       <li><a href="#">Contacto</p></a></li>
  7.     </ul>
  8. </div>


Código CSS:
Ver original
  1. #menu li a{display:block;padding:3px 8px;font-size:12px;color:#fff;text-decoration:none;}
  2. #menu li a:hover{color:#003;}

:) con eso ahorrarías algo de código jeje
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: hover, propiedad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:02.