Foro de elhacker.net

Muy buenas,

Tengo un botón que aparece el nombre del usuario "Hola, root" (por ejemplo). Al hacer hover, digamos que se voltea 90 grados y aparece un "Salir" en el que supuestamente al hacer click te deslogeas de la web. Esa transición dura aproximadamente 1 segundo, el problema es que el href que tiene el botón sólo actúa cuando está en "Hola, root" y, cuando se voltea 90 grados y aparece "Salir", ya no tiene efecto el href (o sea, al voltearse es como si pasase a ser otro botón distinto que no tiene asignado ningún href).

Captura de la transición del botón:

(http://thumbs.subefotos.com/362f74da47347b962e733bb83ebd118do.jpg) (http://subefotos.com/ver/?362f74da47347b962e733bb83ebd118do.jpg)

Código en HTML:

    <a href="/inicio">
        <button class="salir pacifico"><span>Hola, <%=usuario%></span></button>
    </a>

Código en CSS:

.salir {
    border-top: 0px;
    border-bottom: 0px;
    border-right: 3px #0385c3 solid;
    border-left: 3px #0385c3 solid;
    cursor: pointer;
    display: block;
    /* border: 1px rgba(255, 255, 255, 0) solid; */
    background: rgba(58, 121, 153, 0);
    color: #2d2d2d;
    margin-bottom: auto;
    margin-top: 35px;
    margin-right: 10px;
    /* padding: 10px; */
    font-size: 18px;
    width: 160px;
    float: right;
    /* box-sizing: border-box; */
    transition: all 1s ease;
    transform-style: preserve-3d;
}
 
.salir:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}
.salir:after {
	top: -120%;
	left: -3px;
	width: 100%;
	position: absolute;
	background: white;
	content: 'Salir';
	transform-origin: left bottom;
	transform: rotateX(90deg);
        font-size: 18px;
        border-right: 3px #0385c3 solid;
        border-left: 3px #0385c3 solid;
        color: white;
        background: rgba(58, 121, 153, 0);
}

¿Alguien sabe qué podría hacer para que cuando aparezca "Salir" me funcione el href del botón?


Muchísimas gracias  ;D

Probaste con jQuery, no se si ya lo usas en tu proyecto, deberias capturar el evento clic de la clase 'salir' y mandarlo a donde queres con JS:

$('.salir').on('click', function(e){
   document.location = 'http://www.google.com';
});

Si le pones la clase "salir" al <a> en vez de al <button>, ¿cnsigues el efecto que buscas? Tal vez sea algo así lo que buscas, no estoy seguro.
Si tal, puedes separar la clase salir en 2: 1 con las animaciones y otro con el estilo, y la del estilo ponérsela al button.

No me dejan usar jQuery :( sólo HTML, CSS y JS

Técnicamente jQuery es JS

---

He estado toquiteando un poco en un jsfiddle

https://jsfiddle.net/khakesqj/

y el problema lo tienes en que el elemento que aparece nuevo con el :after esta en una posición absolute y con un desplazamiento en negativo, lo que lo sitúa fuera del elemento clickable, por lo que nunca va a ejecutar el evento click sobre el elemento principal.


Mod: No hacer doble post.