Desesperacion de este novato

[AlexKurban]

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;

Código (html4strict) [Seleccionar] Expandir

<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:

Código (css) [Seleccionar] Expandir

#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



Muchas gracias por la atencion

[#!drvy]

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).

Código (css) [Seleccionar] Expandir

.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.

Código (css) [Seleccionar] Expandir

#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

Saludos

[AlexKurban]

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...

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).

Código (css) [Seleccionar] Expandir

.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.

Código (css) [Seleccionar] Expandir

#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

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;



tengo el css configurado asi partiendo del menu que el fondo es el pattern para el menu;

Código (css) [Seleccionar] Expandir

#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

[dainodaibouken]

no te entendi muy bien podrias explicarte mejor? xD

saludos!

[.:UND3R:.]

AlexKurban te dijeron que usaras la etiqueta code!

[AlexKurban]

Ya lo solucione todo muchas gracias de todas formas