HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

CSS to keep arrows from disappearing on hover

This discussion is related to the Expandable Categories addon.
AaronWebsteyAaronWebstey Headband AfficionadoCole Harbour, NS ✭✭✭
edited January 2015 in Feedback

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

vrijvlinder

Comments

  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭
    edited 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;
    }
    
    vrijvlinder
  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭
Sign In or Register to comment.