Ayuda con efecto hover en un botón

Oria · 26 Feb 2019

buenas noches BETAS, estoy intentando usar HOVER para canbiar de lugar un elemento al pasar el curso por encima, pero este se regresa al quitar el curso (ver gif)

Como puedo hacer para que el boton no se regrese 😛ensativo:... DESDE YA gracias por la ayuda

Karasu · 26 Feb 2019

Lo mejor sería hacerlo con javascript, así te evitas problemas como ese. :guiño:

Oria · 26 Feb 2019

Kuroneko-kun dijo:
Lo mejor sería hacerlo con javascript, así te evitas problemas como ese. :guiño:

me podrias lanzar algun tuto que tengas... muchas gracias

Karasu · 26 Feb 2019

Oria dijo:
me podrias lanzar algun tuto que tengas... muchas gracias

No es precisamente un tutorial ni mucho menos, pero con éste código deberías de hacerte una idea de como poder hacer algo similar. Saludos.

Insertar CODE, HTML o PHP:

<style>
.container {
width: 200px;
height: 200px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.close {
background: #df0000;
padding: 8px 16px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}

.close.r {
left: 100%;
transform: translateX(-100%);
}

</style>

<div class="container" id="container">
<div class="close" id="close">x</div>
contenido
</div>

<script>
(function(){
let cls = document.getElementById('close'),
	container = document.getElementById('container')
	control = 0;
cls.addEventListener('mouseover', function(){
	if (control==0) {
		cls.classList.add('r');
		control=1;
	}
})
cls.addEventListener('click', function(){
	container.remove();
})
})();
</script>

emaasteer · 28 Feb 2019

con css lo puedes hacer sin proble seria algo como:

Insertar CODE, HTML o PHP:

.close:hover{
	transform: translateX(150px); // de esta manera lo desplazas 150px en el eje X
}

zcriptz · 6 Mar 2019

emaasteer dijo:
con css lo puedes hacer sin proble seria algo como:

Insertar CODE, HTML o PHP:

.close:hover{ transform: translateX(150px); // de esta manera lo desplazas 150px en el eje X }

Al moverse el elemento, sale del puntero y ya no hay "hover".

- - - Actualizado - - -
[MENTION=199075]Oria[/MENTION], no te resultaría mejor:

Insertar CODE, HTML o PHP:

<div onmouseover="this.style.display='none'">[ X ]</div>

?

memeringo · 6 Mar 2019

[MENTION=199075]Oria[/MENTION], un saludo grande,

¿Nos mostrarías tu código css?

Decirte una solución, sin ver el problema, es como diagnosticar tu auto sin verle el motor.

Ayuda con efecto hover en un botón

Oria

Karasu

Oria

Karasu

emaasteer

zcriptz

memeringo

Temas similares