Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Need help with creating a FireFox 78 titlebar hover event in CSS

  • No replies
  • 1 has this problem
  • 3 views
more options
@-moz-document url("chrome://browser/content/browser.xul"),
               url("chrome://browser/content/browser.xhtml") }
/* Need to replace #main-window:not(:hover) with hover title bar event */
#navigator-toolbox {
  max-height: 0;
  overflow: hidden;
  transition: ease all 1s;
}
#main-window:not(:hover) #navigator-toolbox, #navigator-toolbox:hover {
  max-height: 100vh;
  animation: 5s pop-in;
  animation-fill-mode: both;
  animation-delay: 0s;
}
@keyframes pop-in {
  from {overflow: hidden}
  to {overflow: unset}
}
<pre><nowiki>@-moz-document url("chrome://browser/content/browser.xul"), url("chrome://browser/content/browser.xhtml") } /* Need to replace #main-window:not(:hover) with hover title bar event */ #navigator-toolbox { max-height: 0; overflow: hidden; transition: ease all 1s; } #main-window:not(:hover) #navigator-toolbox, #navigator-toolbox:hover { max-height: 100vh; animation: 5s pop-in; animation-fill-mode: both; animation-delay: 0s; } @keyframes pop-in { from {overflow: hidden} to {overflow: unset} }</nowiki></pre>

Modified by cor-el