Duda con Eventos en JavaScript

JanPierre · #1 (**permalink**) 10/12/2013, 23:25

Buen día a toda la comunidad de ForosdelWeb, tengo una duda y espero que me ayuden los que saben del tema por favor, de ante mano muchas gracias.

No tengo mucho conocimiento de JavaScript, pero sí de HTML5 y CSS3.

Tengo estos 2 archivos (que son totalmente de ejemplos para luego aplicarlo en mi proyecto real):

1. Archivo HTML

Código HTML:

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Foros del Web</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header>
	<h1>Mi Título de Ejemplo</h1>
	<div id="menu">
		<button class="boton">Evento</button>
	</div>
</header>
<br />
<section id="container">
	<article>
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
		<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p><br />
	</article>
</section>
</body>
</html>

1. Archivo CSS

Código CSS:

Ver original*{
    margin: 0 0;
    padding: 0 0;
}
body{
    background: #f60;
}
header{
    width: 90%;
    background: #00ff00;
    margin: 0 auto;
}
section#container{
    width: 98%;
    background: #0000ff;
    margin: 0 auto;
    transition: all 1s;
}
section#container:hover{
    width: 90%;
    transition: all 1s;
}
div#menu{
    text-align: center;
}
.boton{
    width: 100px;
    height: 30px;
    background: #e8e8e8;
    border-radius: 3px;
    border: solid 1px #ccc;
    margin: 0 auto;
}

Lo que quiero es que, con ayuda de JavaScript, generar un evento, el cual haga lo siguiente:

Al darle click en el botón, se aplique la pseudoclase hover y por lo tanto, el section se vea afectado con esa transición con la que se ve (reduciendo de ancho).

Y que al darle NUEVAMENTE otro click, el section regrese a su propiedad inicial con el width: 98%; con la misma transición que se ve en el css.

Yo no sé casi nada de JavaScript, pero necesito generar un evento de ese tipo, si bien no entra nada de CSS, ésta es la única manera que se me ocurrió para poder explicarles lo que quiero.

Espero que me ayuden, muchas gracias.

IsaBelM · #2 (**permalink**) 11/12/2013, 06:23

es posible hacerlo con css