使用CSS更改扩展图标背景

发布于 2025-02-14 01:38:29 字数 1416 浏览 3 评论 0 原文

您好,我正在尝试删除工具栏图标的默认背景时,当使用userChrome.css鼠标悬停在Firefox中时,

     .toolbarbutton-icon
     {
        border-radius: 5px !important;
        box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
        background-color: var(--uc-regular-colour) !important;
        width: 26px !important;
        height: 26px !important;
        padding: 5px !important;
     }

此代码块会更改所有工具栏按钮的大小和颜色,包括扩展图标,

然后我使用此代码块在悬停时更改其颜色它们

     *:hover > .toolbarbutton-icon{
        background-color: green !important;
     }

会在悬停时会更改按钮的颜色,但是扩展按钮保持不变。

我该如何更改它而不必定义

下面的每个扩展名或属性是一些屏幕截图,以说明问题

“悬停在设置上图标“

” png“ alt =”悬停在私人浏览图标上“>

您可以看到除扩展按钮外,所有按钮都会更改颜色

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

,并建议使用该块下面,但默认情况下它会徘徊在所有图标上,我希望每个按钮在悬停在扩展按钮上时也会更改颜色,它仍然具有灰色

“在此处输入图像说明”

Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css

     .toolbarbutton-icon
     {
        border-radius: 5px !important;
        box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
        background-color: var(--uc-regular-colour) !important;
        width: 26px !important;
        height: 26px !important;
        padding: 5px !important;
     }

This block of code changes the size and color of all toolbar buttons including extension icons

Then I used this block of code to change its color when hover over them

     *:hover > .toolbarbutton-icon{
        background-color: green !important;
     }

Which changes color of buttons when hover but the extension buttons stays the same.

How can I change it without having to define each extension name or property

Below are some screenshots to demonstrate the issue

hover over settings icon

hover over private browsing icon

hover over foxyproxy extension icon

As you can see except extension button all buttons change color

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

小傻瓜 2025-02-21 01:38:29

当您使用> 时,这将是一个问题。

> 符号仅适用于该元素的直接子女。

尝试使用:

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

希望这会有所帮助。

It will be a problem when you use >.

The > notation applies only to the immediate children of that element.

Try use:

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

Hope this helps.

桜花祭 2025-02-21 01:38:29
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}

显然在进行了一些研究之后。终于找到了修复它的方法。
代码块仅适用于Firefox上安装的扩展

.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}

Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文