CSS to keep arrows from disappearing on hover

AaronWebstey · January 2015

I was having a problem where the li background arrows were disappearing when I hovered over the links; I fixed this by adding selectors as follows:

/* Root categories with sub categories hidden*/ ul.PanelCategories li.Leader, ul.PanelCategories li.Leader.Active, ul.PanelCategories li.Leader a:hover { ... }

/* Root categories with sub categories expanded */ ul.PanelCategories li.Leader.Expanded, ul.PanelCategories li.Leader.Active.Expanded, ul.PanelCategories li.Leader.Expanded a:hover { ... }

Edit: needed to add the '.Leader' in both classes as the arrows were popping up when hovering over subclasses

AaronWebstey · January 2015

OK, looks like I left out some other selectors too. Would have to add ul.PanelCategories li.Leader.Active a:hover (and similar in the other class.

However, in case you're interested @hgtonight‌ , I'm now using this for my css with this plugin. Categories with sub-cats don't line up like with your css, and I was going to try to fix that but I actually kind of like it this way

/* Root categories with sub categories hidden */
ul.PanelCategories li.Leader a::before, 
ul.PanelCategories li.Leader.Active a::before {
    content: "▸";
} 

/* Root categories with sub categories expanded */
ul.PanelCategories li.Leader.Expanded a::before, 
ul.PanelCategories li.Leader.Active.Expanded a::before {
    content: "▾";
} 

#Panel .PanelInfo li.Depth2 {
    padding-left: 12px;
}

#Panel .PanelInfo li.Depth2 a::before {
    content: "↳";
}
/* This makes it feel a little more polished */
ul.PanelCategories li.Heading {
    cursor: default;
}

AaronWebstey · January 2015

CSS to keep arrows from disappearing on hover

Comments