Change your #navigator-toolbox:hover selector to #main-window:hover #navigator-toolbox because this should apply the style rules to the toolbar when you are hovering over the main window.

Hope this helps.

Do you only want to hide the toolbar area or also the browsing (website) area ?

See also:

• https://developer.mozilla.org/en/Web/CSS/:focus-within

Thank you Wesley Branton for your fast response. Your method worked perfect for what i wanted. The only other thing that would make this complete for me is to add a 5 second transition to the hide when the cursor leaves the window. The instant snap on focus is fine. Thanks again for your help!

Here is my current userchrome.css settings in case it helps anyone else trying to achieve what i have here. This userchrome.css plus the "Youtube full windowed" addon is ultimately what i did this for, so i can watch youtube videos fullscreen windowed with ease. The only issue i've had is when i hover between bookmarks on the bookmark toolbar, there is a 1 pixel line(not visible) that acts as if i move my cursor off the browser and everything quickly hides then unhides. Minor bug that hopefully a transition delay might fix.

 #navigator-toolbox {
   height: 0px;
   overflow: hidden;

 }

 #main-window:hover #navigator-toolbox {
   height: auto;
   overflow: show;

 }

You can change your CSS code to this in order to enable a transition:

#navigator-toolbox {
  max-height: 0;
  overflow: hidden;
  transition: ease all 5s;
}

#main-window:hover #navigator-toolbox {
  max-height: 100vh;
  animation: 0s pop-in;
  animation-fill-mode: both;
  animation-delay: 5s;
}

@keyframes pop-in {
  from {overflow: hidden}
  to {overflow: unset}
}

You have to change your CSS to restrict the max-height instead of the height because CSS transitions won't work when the height changes from a fixed value (like 0px) to auto. Using max-height has the same effect as setting the height manually, in this case.

Of course, you can adjust the transition duration if you want. I've set it to 5s in this code, but it can be anything. You also need to set the animation-delay value to match whatever the transition time is.

One thing I also fixed in your code is the overflow. Having it set to show when hovering on the window causes some issues showing the drop-down menu from the address bar. Changing the overflow value to unset is a better option because it will restore that value to it's default when you are hovering and will allow the drop-down to be shown.

That's why I had to use an animation (the @keyframes part) to essentially delay the overflow value from applying. Because you can't really smoothly transition from a hidden overflow to visible overflow, you will get a pop-in effect when your mouse goes back on the screen. The animation stops the pop-in.

Hopefully this works for you.

Absolutely brilliant work sir! I couldn't have asked for a more beautiful code than this. This 110% fixed all the issues i've been having and i very much appreciate your time in helping me get this code figured out. This far exceeded my expectations before posting here and i couldn't be more satisfied with the responses and results. Thank you again very much!

No problem! Glad I could help :)

Wesley, you just solved a problem I've been living with for years. It was a huge annoyance and even was damaging my monitors by causing burn-in from my bookmarks/url bar. (On LCD monitors, no less. Crazy, I know)

Thank you so much. Your solution completely solves it and is very elegant. I wish I had this years ago.

I feel like I'm getting greedy now, but I was curious if there was a way to enable the hover effect to trigger when my mouse enters the area where the Navigation toolbox "would" be, as opposed to when I hover over the window?

I tried changing main-window:hover -> navigator-toolbox:hover but it didn't work.

Thanks so much anyway!

I don't believe that would be possible. The CSS code above shrinks the height of the navigation bar to zero, so that it's hidden. Unfortunately, since the element's height is now zero, there's no way for the mouse to hover over that element and have the hover event trigger.

So, I looked into this some more and the best that you will be able to do is to set the max-height value to something very small instead of zero. That would give you a very small border at the top of the screen that will trigger the toolbar to appear when you put your mouse at the very top of the screen.

The code would be something like this:

#navigator-toolbox {
  max-height: 10px;
  overflow: hidden;
  transition: ease all 5s;
}

#navigator-toolbox:hover {
  max-height: 100vh;
  animation: 0s pop-in;
  animation-fill-mode: both;
  animation-delay: 5s;
}

@keyframes pop-in {
  from {overflow: hidden}
  to {overflow: unset}
}

You can maybe play around with the max-height setting to see if you can get it smaller. On my system, 10px appears to be the smallest value I can have before it is no longer on the screen (due to some screen overflow).

Hope this helps.