Show firefox 57 tab bar on nav-bar hover

Question

I am trying to edit the userChrome.css file to by default hide the tab bar on FF 57 and did it using the following code

#TabsToolbar {
    visibility: collapse !important;
}

and I want the tab bar to be visible only when I hover over the nav-bar i.e. the toolbar which contains the address field, navigation buttons, menu button and the like stuff. So, I did tried the following way.

#nav-bar:hover+#TabsToolbar{
    visibility: visible !important;
    background-color:red !important;
}

I have noted that the hover attribute is not working at all on the #nav-bar because I have noted that even the background color is also not being changed.

Update: In general, css would work like this:

#b
{
visibility: collapse;
}
#a:hover+#b
{
visibility: initial !important;
}

<!DOCTYPE html>
<html>
<body>

<toolbar id="a">div a
 <p>This para</p>
</toolbar>
<toolbar id="b">div b</toolbar>
</body>
</html>

Without markup your CSS is useless. Consider adding a fully qualified [mcve] (live snippet) reproducing your problem. You should also consider dropping `!important` in this example. There's absolutely nothing to override, so... — tao, Dec 15 '17 at 11:43
@AndreiGheorghiu for normal css div snippets it is working, but in the case of firefox it is not working. I will post the css snippet in the normal case in the question above — JavaTechnical, Dec 15 '17 at 11:48
If it doesn't work, it means `#nav-bar:hover+#TabsToolbar` does not match your element. Which means it has nothing to do with Firefox or its version. Just to test, open your project in a different browser. — tao, Dec 15 '17 at 11:49
@AndreiGheorghiu I checked it with xul using the chrome inspector tool (Ctrl+Alt+Shift+I) and noted that the id of the element is #nav-bar and that it contains all the elements. The #nav-bar is the next element of the #TabsToolbar and #nav-bar contains many children. — JavaTechnical, Dec 15 '17 at 11:51
Working perfectly (as intended) for me in Firefox Quantum 57.0.1 (64-bit), on Linux. — tao, Dec 15 '17 at 11:52
@AndreiGheorghiu I also tried manually putting the :hover attribute to the #nav-bar using the developer console context-menu but still it didn't work. — JavaTechnical, Dec 15 '17 at 11:53
My guess is you have a typo somewhere in your selector. It can also be a case of invalid CSS before this code that disables it in Firefox but not in other browsers. Does the example posted here, on SO. work for you in FF? — tao, Dec 15 '17 at 11:54
@AndreiGheorghiu You mean the code snippet (general css), if so, then yes. But for Firefox toolbar no. FYI, there is no other code in the userChrome.css other than this. — JavaTechnical, Dec 15 '17 at 11:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161294/discussion-between-user12458-and-andrei-gheorghiu). — JavaTechnical, Dec 15 '17 at 11:59

score 2 · Accepted Answer · edited Jul 17 '20 at 15:39

2

This worked for me.

#TabsToolbar {
    visibility:collapse;
}

#navigator-toolbox:hover #TabsToolbar{
    visibility: visible !important;
    
}

This works by instead detecting hover on the entire top navbar

edited Jul 17 '20 at 15:39

Powersource

120
1
13

answered Dec 15 '17 at 12:31

JavaTechnical

8,846
8
61
97

Ok no somewhat, I had to do this https://www.reddit.com/r/FirefoxCSS/comments/brmi8v/psa_firefox_v69_users_will_have_to_set_a_pref_to/ and now it hides the tab bar. Doesn't show it on hover though :P – Powersource Jul 17 '20 at 15:27
Removing the ">" fixed it :) – Powersource Jul 17 '20 at 15:33

Show firefox 57 tab bar on nav-bar hover

1 Answers1