Alterar el estilo de un elemento externo.

replica · #1 (**permalink**) 14/08/2013, 08:44

Hola, estoy intento hacer que los elementos de una página aparezcan y desaparezcan al pulsar sobre otros elementos diferentes.

Código HTML:

Ver original<html>
    <head>
        <style type="text/css">
            section {display: none;}
        </style>
    </head>
    <body>
        <header>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </header>
        <nav>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </nav>
        <section>sec 1</section>
        <section>sec 2</section>
        <section>sec 3</section>
        <section>sec 4</section>
        <section>sec 5</section>
        <section>sec 6</section>
        <section>sec 7</section>
        <section>sec 8</section>
    </body>
</html>

La idea es hacer una barra de navegación (en mi caso una superior y otra lateral, aunque no lo he puesto en el css), y que según clique sobre un div u otro (perfectamente sustituibles por <li>, <a>, checkbox, me da igual) provoque que los section aparezcan o no (section{display:block;}).

He probado ya con esas soluciones, e incluso con algún selector de css, sin éxito (es posible que me equivoque al utilizarlos). Los eventos que he utilizado son :active y :focus, sin ningún resultado (es curioso que css aún no tenga un :click o algo así).

Me conformo con lo que pido arriba. La guinda del pastel sería provocar que desaparecieran todos los section, y sólo se mostrara el que selecciono. Y la chica que sale de dentro del pastel sería provocar que el section a mostrar fuera el resultado tanto del click del nav combinado con el click en header.

No quiero utilizar Javascript. Intento mantener el código al mínimo, pero creo que al final tendré que ceder.

¿Alguien tiene alguna idea? Gracias.

pzin · #2 (**permalink**) 14/08/2013, 09:01

No te acabo de entender muy bien, pero por lo que entendí, la única forma de hacerlo en CSS es usando elementos de formularios y la pseudoclase :checked, pero, yo no recomendaría hacer eso, ya que no es para semántico.

La solución óptima es hacerlo mediante JavaScript.

replica · #3 (**permalink**) 14/08/2013, 09:24

Cita:

Iniciado por pzin

No te acabo de entender muy bien, pero por lo que entendí, la única forma de hacerlo en CSS es usando elementos de formularios y la pseudoclase :checked, pero, yo no recomendaría hacer eso, ya que no es para semántico.

La solución óptima es hacerlo mediante JavaScript.

Simplemente quiero que aparezca un elemento cuando clico en otro. Igual me da un botón, que un link, que lo que sea. Sólo apretar, y que el elemento destino acepte un cambio de estilo (display:block;)

He probado con radiobutton: checked, y bueno, lo primero es lo que dices, que he tenido que ponerlos ocultos, y he estado utilizando el label for para clicarlos. Eso me rompe la semántica, claro. Y la segunda es que con el checked no he conseguido provocar que el section acepte el estilo nuevo.

pzin · #4 (**permalink**) 14/08/2013, 09:58

Es mejor que lo hagas mediante JavaScript. La única forma de interactuar con CSS mediante clicks es con formularios. Y queda luego todo un poco feo —desde el punto de vista del markup.

replica · #5 (**permalink**) 14/08/2013, 11:00

Bueno, y hay alguna solución, aunque sea sin clicks? ¿Haciendo hover sobre un elemento, por ejemplo? Porque me surgen los mismos inconvenientes, cómo le puedo dar un estilo a un elemento diferente, que no es hijo, ni nieto, ni sobrino, ni nada...