Sidebar HOVER color for a Space

Darin Hafer

I've learned how to style the sidebar for a Space and found some good tidbits here.

I can't figure out how to change the "hover" color and background color. 

 

For example, when I hover over Space Shortcuts or the links above it, I see the elements on the page look like '.acs-nav-item' which is an <li> and '.acs-nav-item-link' which is the <a>.

How can I specify the css for these items to change both color and background-color?

I've tried to determine this one and can't figure it out :-) 

 

Gareth Cantrell

Hi Darin,

In the space stylesheet, you can override the :hover pseudo-selector for the class:

.acs-nav-item-link:hover {
    ....
}

You also want to ensure that your style is as specific as possible, otherwise use the !important declaration (eg. background-color: red !important;)

In my space, the navigation looks like:

<li class="acs-nav-item pinned_page">
   <a class="acs-nav-item-link tipsy-enabled" href="/display/TEST/My+Page?src=spaceshortcut" data-collapsed-tooltip="null">
     <span class="icon"></span>
     <span class="acs-nav-item-label">My Page</span>
   </a>
</li>

so I added the following in my space stylesheet:

/* target both style classes to be as specific as possible */
a.acs-nav-item-link.tipsy-enabled:hover {
    background-color: coral;
}

/* label color is controlled by the label class of the span attribute */
a.acs-nav-item-link.tipsy-enabled:hover > span.acs-nav-item-label {
    color: white;
}