soy un nuevo usuario de este foro con ganas de aprender y tambien de aportar en esta gran comunidad.
Con relación al tema, esta es mi duda que les agradeceria mucho si me pueden ayudar.
estoy desarrollando un jquery para poner un hover para que cuando pase el mouse sobre un boton me cambie el color de fondo. lo que pasa es que este boton tiene una clase y un background, el problema es que cuando le pongo en la funcion hover con su addclase nuevo, el addclase no cambia el color a menos que remueve la clase que tenia anteriormente ese boton.
en pocas palabras, al poner un addclass, remplaza una propiedad igual a la propiedad antigua o si ya tenia la propiedad no se cambia y solamente el addclase agrega propiedades que no tenia la clase antigua??
Código Javascript :
$(document).on("ready",function(){
$('nav .menu').click(function(){
$('article').removeClass();
if (this.id == 'normal') {
$('article').addClass('normal');
} else if (this.id == 'estrecho') {
$('article').addClass('estrecho');
} else if (this.id =='impresion') {
$('article').addClass('impresion');
}
$('nav .menu').removeClass('selected');
$(this).addClass('selected');
});
});
$(document).on("ready",function(){
$('span').hover(function(){
$(this).addClass('alternador-hover');
}, function(){$(this).removeClass();
});
});
$(document).on("ready",function(){
$('span').toggle(function(){
$('nav .menu').removeClass().addClass('ocultar');
},function(){
$('nav .ocultar').removeClass().addClass('menu');
});
});
$(document).on('ready',function(){
$('nav .menu').hover(function(){
$(this).addClass('menuHover');
},function(){
$(this).removeClass('menuHover');
});
});
Código HTML :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>Plantilla HTML5</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/libs/modernizr.min.js"></script> <script src="js/jquery.js"></script> <script src="js/libs/prefixfree.min.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header><h1>La Historia de JQUERY</h1></header> <nav><span class="alternador">Alternador de Estilos</span> <div id="normal" class="menu">Normal</div><div id="estrecho" class="menu">Estrecho</div><div id="impresion" class="menu">Impresión</div> </nav> <section id="contenedor"> <article> <p>jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas.2 Microsoft la añadirá en su IDE Visual Studio3 y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time.</p> </article> <article> <h2>Caracteristicas</h2> <p>Selección de elementos DOM. Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath. Eventos. Manipulación de la hoja de estilos CSS. Efectos y animaciones. Animaciones personalizadas. AJAX. Soporta extensiones. Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc. Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.4</p> </article> </section> <aside> </aside> <footer> </footer> </body> </html>
Código CSS :
@charset "utf-8";
/* CSS Document */
body {
background-color: #0f1a23;
color: #fff;
font-family: arial;
font-size: 16px;
font-weight: 500;
}
header h1{
color:#0868ac;
text-shadow:0.1em 0.2em black;
}
nav {
background-color: #0868ac;
height: 4em;
padding-left: 3em;
}
.alternador {
cursor: pointer;
margin-top: 1em;
}
#contenedor
{
background: #131f2b;
width: 95%;
border-radius: 0.5em;
margin: 1em auto;
vertical-align: top;
text-shadow:2px 2px 5px rgba(0,0,0,0.7);
}
#contenedor article {
text-align: justify;
width: 40%;
padding: 0.5em;
margin:0 2%;
min-height: 350px;
background: #192b3d;
display: inline-block;
vertical-align: top;
transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
}
#contenedor article:hover {
background: #aaa;
transform: rotate(4deg) translateX(10px);
-Webkit-transform: rotate(4deg) translateX(10px);
}
h2 {
text-shadow:0.1em 0.2em black;
}
nav .menu {
display:inline-block;
background-color: #b2dfff;
width: 5em;
height: 2em;
color: #0f1923;
margin-left: 3em;
text-align: center;
padding-top: 0.6em;
cursor: pointer;
z-index: 0;
border: 0.3em #fff solid;
}
.normal {
font-size: 1em;
}
.estrecho {
font-size: 0.4em;
}
.impresion {
font-size: 1.8em;
}
.ocultar {
display: none;
}
.selected {
font-weight: bold;
}
.alternador-hover {
color: #dadada;
}
.menuHover {
background-color:#0f1923;
color: #fff;
z-index: 1000;
}les agradeceria mucho si me pueden ayudar!
