Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Támogatás keresése

Kerülje el a támogatási csalásokat. Sosem kérjük arra, hogy hívjon fel egy telefonszámot vagy osszon meg személyes információkat. Jelentse a gyanús tevékenységeket a „Visszaélés bejelentése” lehetőséggel.

További tudnivalók

A témacsoportot lezárták és archiválták. Tegyen fel új kérdést, ha segítségre van szüksége.

Non-selected Tabs - Highlight on Hover

  • 5 válasz
  • 1 embernek van ilyen problémája
  • 40 megtekintés
  • Utolsó üzenet ettől: Slouch

more options

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!

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!

Módosította: Slouch,

Kiválasztott megoldás

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 :)

Válasz olvasása eredeti szövegkörnyezetben 👍 0

Összes válasz (5)

more options

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;
}

Módosította: cor-el,

more options

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;
}

Módosította: Slouch,

more options

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.

more options

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?

Módosította: Slouch,

more options

Kiválasztott megoldás

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 :)

Módosította: Slouch,