Skip to main content

Tabs element - Inactive Tab, change font color on hover

Comments

2 comments

  • VISUI

    Martin,

    Unless you've changed the structure of the tabs element, you should see the following HTML for your tabs:

    <div id="rdTabs">
    <ul class="yui-nav" style="white-space:nowrap; width:0%" id="yui_3_1_1669904428447_139">
    <li class="selected" id="tab1" title="">
    <a href="#rdTabPanel-tab1" id="yui_3_1_1669904428447_155">
    <em id="yui_3_1_1669904428447_157">
    <span id="rdCaption_tab1">Tab1</span>
    </em>
    </a>
    </li>
    <li id="tab2">
    <a href="#rdTabPanel-tab2" id="yui_3_1_1669904428447_138">
    <em id="yui_3_1_1669904428447_141">
    <span id="rdCaption_tab2">Tab2</span>
    </em>
    </a>
    </li>
    <li id="tab3">
    <a href="#rdTabPanel-tab3" id="yui_3_1_1669904428447_144">
    <em id="yui_3_1_1669904428447_146">
    <span id="rdCaption_tab3">Tab3</span>
    </em>
    </a>
    </li>
    <li id="tab4">
    <a href="#rdTabPanel-tab4" id="yui_3_1_1669904428447_149">
    <em id="yui_3_1_1669904428447_148">
    <span id="rdCaption_tab4">Tab4</span>
    </em>
    </a>
    </li>
    </ul>
    </div>

    Logi, by default, places it's background color on the a anchor tag in the Tabs element.  To override this your css selector would need to either be more specific, or use the !important tag.

    <style>
    .yui-navset .yui-nav li:not(.selected):hover a {
      background-color: Orange !important; /*InactiveHoverTabBackground*/ 
      color: Yellow;
    }
    </style>

    Use of the !important tag is necessary in some instances, but you can achieve the same results by targeting the em tag since the sizing of the tab's li container is actually dependent on the size of the em block.  The use of the :not() selector keeps the currently selected tab from being highlighted when hovered over.

    .yui-navset .yui-nav li:not(.selected):hover em {
    background-color: Orange; 
      color: Yellow;
    }

     

    1
  • Martin Rees

    Hi Visui,

    Yes!  Thank you for this.  Using these methods I am able to produce the requirement.  I don't think I would have worked out how to target the em tag in conjunction with not(.selected) to make this work.

    Thanks again

    Martin Rees

    1

Please sign in to leave a comment.