¿Psuedo-clase para mantener div visible en foco / activo?

Tengo un div que está oculto hasta que el usuario hace clic en un enlace. Utilizando el a:active + div selector se muestra el div. entonces tengo div:active, div:focus para mantener el div visible.

Si bien hacer que aparezca el div fue bastante simple, mantenerlo visible es el problema que tengo. Si hago clic en el div (quitando el activo del enlace y colocando el foco / activo en el div), el div desaparece nuevamente.

He intentado usar div:hover y mientras eso muestra el div (incluso después de hacer clic en él) cuando me muevo, el div aún desaparece. Por qué son :active y :focus no se aplica a mi div?

Ejemplo: http://jsfiddle.net/pJWPE/

preguntado el 31 de julio de 12 a las 10:07

3 Respuestas

Podría adoptar un enfoque diferente, utilizando el :target pseudoclase en su lugar. La mejor manera de ilustrar esto es con un ejemplo:

#box {
  display: none;
}
#box:target {
  display: block;
}
<a href="#box">Open</a>  <a href="#">Close</a>

<div id="box">content</div>

Advertencia, no estoy seguro de cómo es el soporte del navegador para este ejemplo. Funciona en mi versión de Chrome.

Respondido 13 Oct 16, 10:10

¿Por qué :active y :focus no se aplican a mi div?

Porque :active y :focus tienen algunas restricciones:

6.6.1.2. Las pseudoclases de acción del usuario :hover, :active y :focus

Los agentes de usuario interactivos a veces cambian la representación en respuesta a las acciones del usuario. Los selectores proporcionan tres pseudoclases para la selección de un elemento sobre el que está actuando el usuario.

  • Los programas :active La pseudoclase se aplica mientras el usuario activa un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo suelta. En sistemas con más de un botón del mouse, :active se aplica solo al botón principal o de activación principal (generalmente el botón "izquierdo" del mouse) y cualquier alias del mismo.
  • Los programas :focus la pseudoclase se aplica mientras un elemento tiene el foco (acepta eventos de teclado o mouse, u otras formas de entrada).

Puede haber límites específicos de idioma o implementación del documento sobre qué elementos pueden convertirse :active o adquirir :focus.

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

A <div> no es ninguna forma de entrada (<textare>, <input>, ...) o de otro modo elemento interactivo (como el <a>, <audio>, <video>). Es solo un contenedor. Ninguno :focus ni :active se van a aplicar.

Utilice las :target en lugar de sugerido por Casey.

Respondido el 20 de junio de 20 a las 10:06

El contexto es un menú que contiene submenús, que quiero que se muestre al hacer clic en el menú relacionado y mantenerlo visible al hacer clic en un enlace. (muy parecido a ti).

Marcado HTML:

<nav>
    <ul>
        <li>
            <a href="#" > 
            </a>
            <div>
                <ul>
                   <li> 
                      <a href="/sites/p1.php">submenu link1</a></li>
                   <li> 
                      <a href="/sites/p2.php">submenu link2</a></li>
                   <li> 
                      <a href="/sites/p3.php">submenu link3</a></li>
                </ul>
            </div>
        </li>
    </ul> 
</nav>

Para el navegador web Firefox y Chrome, personalmente uso:

nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
   display : block;
}

El primer selector hace referencia a mi ancla de enlace, para obtener qué submenú se muestra cuando se hace clic en él/se selecciona la pestaña. La segunda es mantener el submenú div abierto mientras hace clic en un enlace (sigue mostrando el div activo).

Esto funciona muy bien para mí, pero no para IE desafortunadamente.

Respondido 03 Feb 15, 08:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.