Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

Non-selected Tabs - Highlight on Hover

  • 5 respostas
  • 1 tem este problema
  • 40 visualizações
  • Última resposta de 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!

Alterado por Slouch em

Solução escolhida

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

Ler esta resposta 👍 0

Todas as respostas (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;
}

Alterado por cor-el em

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

Alterado por Slouch em

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?

Alterado por Slouch em

more options

Solução escolhida

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

Alterado por Slouch em