搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Non-selected Tabs - Highlight on Hover

  • 5 回覆
  • 1 有這個問題
  • 40 次檢視
  • 最近回覆由 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!

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

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

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

由 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?

由 Slouch 於 修改

more options

選擇的解決方法

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 於 修改