Hola a todos, estoy siguiendo unos tutoriales de creacion web con html5 css3 y js y intentando añadir cosas, es lo mas basico de todo pero aun asi tengo un problema con un hover:
en en menu que he creado cuando paso el raton se seleccionan cada sección pero no quiero que se seleccione el logo que va en medio, y estoy cosa de 2 horas probando cosas diferentes, ojeando libros y buscando en la web y aun asi nada... me estoy desesperando ahora os paso los codigos y me decis en donde falle;
en el HTML5;
<div id="container">
<div id="menu">
<ul>
<li><a href="#servicios">SERVICIOS</a></li>
<li><a href="#fotos">FOTOS</a></li>
<li><a href="#inicio" class="logo"></a></li>
<li><a href="#hobbies">HOBBIES</a></li>
<li><a href="#contacto">CONTACTO</a></li>
</ul>
</div> <!-- menu -->
En el CSS:
#menu ul li a {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 40px 10px;
text-decoration: none;
}
#menu ul li a:hover{
background: url('../img/fondo1.png') ;
color: #000;
}
.logo {
background: url("../img/logo.jpg") ;
background-repear: no repeat;
background-position: center center;
padding-left: 65px !important;
padding-right: 65px !important;
hover: block;
}
y aqui os pongo un captcha
(http://imageshack.com/a/img855/1428/jqev.png)
Muchas gracias por la atencion
Normalmente lo que se hace es sobre escribir los valores en el class/id especifico. Esto es un poco feo pero se hace por compatibilidad (http://caniuse.com/css-sel3 (http://caniuse.com/css-sel3)).
.logo:hover {background:url("../img/logo.jpg") !important;}
Aunque si lo deseas hacer bonito y como debería ser en teoría, basta con utilizar el selector not() de CSS.
#menu ul li a:not(.logo):hover {
PD: No existe hover como propiedad en CSS. Solo como selector.
PD2: Utilizar etiquetas [code][/code]. Leer reglas -> Normas del subforo de Desarrollo Web (http://foro.elhacker.net/desarrollo_web/normas_del_subforo_de_desarrollo_web-t407889.0.html)
Saludos
Buenas noches y muchas gracias por la respuesta, he utilizado la primera solucion porque con lo del atributo no:(.logo) nose porque se me come el logo y el menu no me hace el hover. le echare un vistazo a fondo que aqui son las 3 de la madrugada y mañana madrugo. Muchas gracias de nuevo, que es un poco jodido estar haciendolo de manera autodidacta y tener preguntas tan simples...
Cita de: #!drvy en 23 Febrero 2014, 22:56 PM
Normalmente lo que se hace es sobre escribir los valores en el class/id especifico. Esto es un poco feo pero se hace por compatibilidad (http://caniuse.com/css-sel3 (http://caniuse.com/css-sel3)).
.logo:hover {background:url("../img/logo.jpg") !important;}
Aunque si lo deseas hacer bonito y como debería ser en teoría, basta con utilizar el selector not() de CSS.
#menu ul li a:not(.logo):hover {
PD: No existe hover como propiedad en CSS. Solo como selector.
PD2: Utilizar etiquetas [code][/code]. Leer reglas -> Normas del subforo de Desarrollo Web (http://foro.elhacker.net/desarrollo_web/normas_del_subforo_de_desarrollo_web-t407889.0.html)
Saludos
Hola de nuevo, de nuevo ando con la complicacion pero a cambiado de nivel;
no logro ajustar el madito logo al pattern que tengo en el menu. Estoy haciendo el efecto para que se quede arriba y cuando a otra pagina mediante jquery tenga el efecto box shadow pero no logro adaptar el maldito logo, al menos ya no me pestañea cada vez que lo paso. mando captura;
(http://imageshack.com/a/img827/4286/w0ga.png)
tengo el css configurado asi partiendo del menu que el fondo es el pattern para el menu;
#menu {
background: url("../img/fondo.png") repeat;
text-align: center;
width: 850px;
position: fixed;
top: 0;
box-shadow: 0 2px 5px rgba(191, 0, 44, 0.7);
-webkit-box-shadow: 0 2px 5px rgba(191, 0, 44, 0.7);
-moz-box-shadow: 0 2px 5px rgba(191, 0, 44, 0.7);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li {
list-style: none;
display: inline-block;
padding: 40px 10px;
margin-left: -25px;
}
#menu ul li a {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 40px 10px;
text-decoration: none;
}
#menu ul li a:hover{
background: url('../img/fondo1.png') ;
color: #000;
}
.logo {
background: url("../img/logo.jpg") !important ;
background-repeat: no-repeat;
padding:60px 70px !important;
box-shadow: 0 10px 6px -6px rgba(191, 0, 44, 0.7);
-webkit-box-shadow: 0 10px 6px -6px rgba(191, 0, 44, 0.7);
-moz-box-shadow: 0 10px 6px -6px rgba(191, 0, 44, 0.7);
}muchas gracias de antemano
no te entendi muy bien podrias explicarte mejor? xD
saludos!
AlexKurban te dijeron que usaras la etiqueta code!
Ya lo solucione todo muchas gracias de todas formas ;D