0
240
Viewscómo transformar el botón después de pasar el mouse nuevamente cuando muosedown y suelte
Tengo un botón con transform: none; cuando activo ese botón, la transformación cambió a transform: scale(0.9); . Eso está claro.
¿Lo que hago? Quiero cambiar la transformación a 0 cuando desplace el botón, pero transforme nuevamente cuando desplace nuevamente ese botón a 0.9.
Screen1: No quiero ese:
Screen2: Quiero ese:
Mi código:
button{ width: 180px; height: 80px; outline: none; border: none; font-size: 18px; color: white; cursor: pointer; font-weight: bold; transform: none; background-color: #3a3b3c; } button:active{ transform: scale(0.9); } <button>Filters</button>2 answers
Answer question0
¿Esto te hará feliz? 🧐 <3 jQuery!
Primero vamos a comprobar si se hace clic en el botón o no. Y si se hace clic, cambie la var para que sepamos que ha cambiado.
var isclicked = false; $('button').click(function(e){ isclicked = true; });
Luego, la función .mouseout , porque desea que el cambio solo tenga lugar cuando el mouse deje el botón. Si entiendo bien tu pregunta. Y sólo cuando se hace clic en el botón. Por lo tanto, ese cheque de clic anterior. Por último, la función .addClass para que podamos diseñar el comportamiento deseado.
$('button').mouseout(function(e){ if(isclicked == true) { $('button').addClass('activated'); } });
&
button.activated:hover { transform: scale(0.9); }
Fragmento de código completo:
var isclicked = false; $('button').click(function(e){ isclicked = true; }); $('button').mouseout(function(e){ if(isclicked == true) { $('button').addClass('activated'); } }); button{ width: 180px; height: 80px; outline: none; border: none; font-size: 18px; color: white; cursor: pointer; font-weight: bold; transform: none; transition:all 0.2s; background-color: #3a3b3c; } button:active{ transform: scale(0.9); } button.activated:hover{ transform: scale(0.9); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Filters</button>0
Así que creé dos funciones para ti, ¡espero que esto funcione para ti! En la etiqueta de su botón, simplemente agregue un mouseout y mousedown para llamar a ambas funciones.
function mouseFunction() { document.getElementById('filters').style.transform = "scale(1)"; } function mouse2Function() { document.getElementById('filters').style.transform = "scale(0.9)"; } <button onmouseout = "mouseFunction();" onmousedown = "mouse2Function();"id = "filters">Filters</button>