fmz 14

I have some images that need to change, based not only on hover, but also on active state.

If you look at the page here. There are some tabs with Screen Printing Quick Links, etc. The tab image is associated with the link and displays properly. The icon in tabs defaults to the gray and turns blue on mouse over, however, I also need it to be blue on the "active" state.

Here is the css:

.quick-links a:hover em,
.quick-links a:active em { 
  background: transparent url(../images/quick-links.png)10px 9px no-repeat; 
  display: block; 
  float: left;}

Here is the html:

<ul class="tabs">
  <li class="quick-links"><a href="#quickLinks" id=""><em><span>Screen Printing Quick Links</span></em></a></li>
   <li class="distributor-ql"><a href="#distributorQL" id=""><em><span>Dealer &amp; Distributor Quick Links</span></em></a></li>
</ul>

What I am looking for is the blue icon to show when the tab is "active".

I would appreciate some help on this.

Thanks.

  • The link is fixed Mottie over 6 years ago

2 answers

BPartch 342
0
points

Your link goes to a 404 page.

Also, just to make sure. You know the :active state is when the link is clicked and the mouse button is still pressed?

Answered over 6 years ago by BPartch
  • Oops. Thanks. fmz over 6 years ago
0
points

The site uses jQuery to add and remove an 'active' CSS class.

$(function(){
$('#mainContentTabs').tabs();
$('#subContentTabBoxes').tabs();
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
     return false;
});

$(window).ready(function() {
    $('li.products ul').show();
    $('li.technical ul').show();
    $('li.tips ul').show();
    $('li.quicklinks ul').show();
}); 

$('#imageBarSlides').cycle({
    fx:     'fade',
    before:   onAfter,
    timeout:  6000
});

});

Also, see the CSS:

.quick-links a:hover em,
.quick-links a:active em    { background: transparent url(../images/quick-links.png) 10px 9px no-repeat; display: block; float: left; }
Answered over 6 years ago by Brian Y.