0
178
Views¿Cómo puedo eliminar este horrible efecto de desplazamiento en este botón?
Así que mi amigo y yo estamos haciendo una extensión de Chrome. Para entrar en detalles, es para Roblox Devforum , y hasta ahora, ¡todo bien! Ayer comenzamos, y ya tenemos nuestro botón en el encabezado y demás, similar a Roblox+ o RoPro.
Sin embargo, hay una situación (no necesariamente un error, principalmente un problema de estilo) con el botón. Cada vez que pasa el cursor sobre el botón, aparece un cuadrado blanco en el ícono del botón y se ve horrible, y no sabíamos qué estaba causando el problema, incluso después de revisar varios artículos en Google, lo que nos trae aquí hoy. El código de la extensión es el siguiente:
modificaciones.js:
function getFirstulWithClass(cssClass) { var elements = document.getElementsByTagName('ul'); for (var i = 0; i < elements.length; i++) { if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) { return elements[i]; } } } var ul = getFirstulWithClass('icons d-header-icons'); if (ul) { ul.innerHTML += ` <li class="header-dropdown-toggle dpp-dropdown"> <a title="DPPSettings" class="icon"> <div> <img src="https://i.imgur.com/suZBJ8y.png" width="45" height="29" title="DSI" class="DSI"> </div> </a> </li> ` }Para aclarar este código, todo lo que hace es buscar el elemento de encabezado e inyecta ese fragmento de código HTML en el encabezado sin anular el código de encabezado original de Devforum.
Ahora quería agregar una pequeña animación al botón para que se viera muy atractivo, así que agregamos un nuevo archivo llamadomodificaciones.css, y se ve así:
@keyframes settingsHover { 0% { width: 45px; height: 29px; } 100% { width: 48px; height: 31px; } } .DSI:hover { animation-name: settingsHover; animation-fill-mode: forwards; animation-duration: .01s; }Todo lo que esto hace es agregar una pequeña animación de ampliación al botón.
Ahora lo unimos en nuestro archivo manifest.json así:
"content_scripts": [ { "matches": ["https://*.devforum.roblox.com/*"], "css": ["modifications.css"], "js": ["modifications.js"] } ],Y esto finalmente crea esta extraña caja que no estaba destinada a ser añadida en la programación de esto, que se ve así:
¿Cómo puedo eliminar esto? ¡Cualquier ayuda es muy apreciada!
2 answers
Answer question0
Permítanme comenzar esto diciendo que de ninguna manera tengo la experiencia suficiente para dar una respuesta verdadera sobre esto, pero no tengo la reputación suficiente para hacer un comentario.
¿Podría el cuadrado blanco ser de alguna manera los fotogramas clave? Parece tener la forma de las dimensiones que proporcionó y podría ser un error visual de CSS que podría solucionarse con una o dos líneas de código. Para mí, parece probable que sea una cosa de Roblox o probablemente una cosa de CSS, pero nuevamente, apenas puedo entender lo que está pasando aquí y tengo poca experiencia. Podría ser algo así como una clase HTML/CSS en el sitio de Roblox y podrías estar haciendo algo accidentalmente con eso también.
Sin embargo, tómate esto con un grano de sal.
0
así que básicamente, la respuesta fue simplemente agregar esto a CSS:
.icon { --primary-low: transparent !important; }