Как мне убрать этот ужасный эффект наведения на эту кнопку?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как мне убрать этот ужасный эффект наведения на эту кнопку?

Сообщение Anonymous »

Мы с другом создаем расширение для Chrome. Если говорить подробнее, это для форума разработчиков Roblox, и пока все хорошо! Вчера мы начали, и у нас уже есть кнопка в заголовке и все такое, аналогично Roblox+ или RoPro.
Однако есть ситуация (не обязательно ошибка, в основном проблема со стилем) с кнопка. Всякий раз, когда вы наводите курсор на кнопку, на значке кнопки появляется какой-то белый квадрат, и это выглядит просто ужасно, и мы не знали, что является причиной проблемы, даже после просмотра нескольких статей в Google, что привело нас сюда сегодня. Код расширения следующий:
modifications.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 += `
[*]


[img]https://i.imgur.com/suZBJ8y.png[/img]



`
}
Чтобы прояснить этот код, все, что он делает, это ищет элемент заголовка и вставляет этот фрагмент HTML-кода в заголовок, не переопределяя исходный код заголовка Devforum.
Теперь я хотел добавить к кнопке небольшую анимацию, чтобы она выглядела очень привлекательно, поэтому мы добавили новый файл под названием «модификации.css», который выглядит следующим образом:

Код: Выделить всё

@keyframes settingsHover {
0% {
width: 45px;
height: 29px;
}
100% {
width: 48px;
height: 31px;
}
}

.DSI:hover {
animation-name: settingsHover;
animation-fill-mode: forwards;
animation-duration: .01s;
}
Все, что нужно сделать, — это добавить к кнопке небольшую анимацию увеличения.
Теперь мы связываем ее вместе в нашем файле манифеста.json следующим образом:< /p>

Код: Выделить всё

"content_scripts": [
{
"matches": ["https://*.devforum.roblox.com/*"],
"css": ["modifications.css"],
"js": ["modifications.js"]
}
],
И в конечном итоге это создает странное поле, которое не предполагалось добавлять в программу, и которое выглядит так:
Изображение

Как это удалить?

Подробнее здесь: https://stackoverflow.com/questions/717 ... his-button
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»