您好,我正在尝试删除工具栏图标的默认背景时,当使用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



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

发布评论
评论(2)
当您使用
>
时,这将是一个问题。>
符号仅适用于该元素的直接子女。尝试使用:
希望这会有所帮助。
It will be a problem when you use
>
.The
>
notation applies only to the immediate children of that element.Try use:
Hope this helps.
显然在进行了一些研究之后。终于找到了修复它的方法。
代码块仅适用于Firefox上安装的扩展
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox