![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Non-selected Tabs - Highlight on Hover
I'd like to highlight a non-selected tab when hovering the mouse over it.
I've tried this code in userChrome.css, but it has no effect...
.tab-background:not([selected]):hover { /* highlight on mouseover */ background-color: #dbe3eb !important; }
Is this method correct, or is there a better way?
Thanks!
Slouch کی جانب سے
منتخب شدہ حل
By chance, I tried the following, and it works...
#TabsToolbar .tabs-newtab-button:hover { background-color: #dbe3eb !important; } .tabs-newtab-button:hover .toolbarbutton-icon { background-color: #dbe3eb !important; }
Didn't need the not([selected]) attribute, so I removed that as well.
Thank you :)
اس جواب کو سیاق و سباق میں پڑھیں 👍 0تمام جوابات (5)
Does this code in userChrome.css wor for you?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ .tabbrowser-tab:not([selected]):hover .tab-content { /* highlight on mouseover */ background-color: #dbe3eb !important; }
cor-el کی جانب سے
Yes, that does work, however it breaks my "Open a new tab" button, which no longer highlights on mouseover (only the '+' sign icon highlights, not the background of the button).
My code appears below yours. Without your code, the entire "Open a new tab" button highlights correctly.
.tabbrowser-tab:not([selected]):hover .tab-content { /* highlight non-selected tabs on mouseover */ background-color: #dbe3eb !important; } #TabsToolbar .tabs-newtab-button { border-top: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important; border-left: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important; border-right: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important; border-top-left-radius: var(--classic_squared_tabs-border-radius) !important; border-top-right-radius: var(--classic_squared_tabs-border-radius) !important; min-width: 0px !important; width: 28px !important; margin-bottom: 0px !important; border-color: #868b98 !important; } .tabs-newtab-button .toolbarbutton-icon { min-width: 0px !important; min-height: 0px !important; width: 14px !important; height: 14px !important; margin: 0px !important; margin-bottom: 0px !important; padding: 0px !important; box-shadow: unset !important; }
Slouch کی جانب سے
I think that this has more to do with background: unset !important; When I remove this rule then at least I get some change on hover, but it is only a small box with your code.
Yes, I took the background: unset line out, and now only the '+' icon is highlighted on mouseover.
Is there a way to have the entire button highlighted?
Slouch کی جانب سے
منتخب شدہ حل
By chance, I tried the following, and it works...
#TabsToolbar .tabs-newtab-button:hover { background-color: #dbe3eb !important; } .tabs-newtab-button:hover .toolbarbutton-icon { background-color: #dbe3eb !important; }
Didn't need the not([selected]) attribute, so I removed that as well.
Thank you :)
Slouch کی جانب سے