Tabs element - Inactive Tab, change font color on hover

Martin Rees

• December 01, 2022 09:07

Morning all,

I have an application styled using a custom theme.  Part of the requirement is where I am using the tabs element they want the font color of the inactive tab to change when hovered over.  I have tried to create an overriding CSS class just for this particular report defintion, and whilst I can find the selectors to target the actual tab colour, I can't seem to get to the tab text.  For example, this will change the tab colour:

.yui-navset .yui-nav li:hover {
  background-color: Red; /*InactiveHoverTabBackground*/ 
}

How can I get to the font color?  It does not seem to be an option in the Theme editor to change the inactive tab hover font color  (Its probably quite obvious that I am no CSS expert!)

Kind Regards

Martin

0

• 

  VISUI

  • Logi Info Ninja
  • December 01, 2022 14:38

  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

  • December 01, 2022 14:51

  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.