Ajuda com efeito hover em um botão

Oria · 26/02/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/02/2019

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

Oria · 26/02/2019

Kuroneko-kun disse:
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/02/2019

Oria disse:
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.

Inserir CODE, HTML ou 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/02/2019

con css lo puedes hacer sin proble seria algo como:

Inserir CODE, HTML ou PHP:

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

zcriptz · 06/03/2019

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

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou PHP:

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

?

memeringo · 06/03/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.

Ajuda com efeito hover em um botão

Oria

Karasu

Oria

Karasu

emaasteer

zcriptz

memeringo

Tópicos similares