Home/ Questions/Q 477127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T00:33:35+00:00

I am building a website with hover effects. See http://vitaminjdesign.com/index.html and look at the

  • 0

I am building a website with hover effects. See http://vitaminjdesign.com/index.html and look at the services section in the bottom right. I am using :hover to change the background color. I want to use jquery to acheive the same result with an elegant fade. Here is my html:

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(repeated 6 times with different images and text)

Basically, when .iconrow is rolled over, I want the background to change from none to background-color: #cccccc; and when it is rolled off, back to none.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Note: I built and tested my solution via Firebug to work on the link you provided. If you follow these steps in order, you should have it fully working

    You will not be able to animate from transparent to a color except in Safari and Firefox 3.5 and other browsers that support RGBA background colors. If you are looking for a cross browser support, then I would attack the problem like this:

    1. Have your default hover effects scoped by a non-js class, so the :hover effects will work as a fall-back. A great way to do this is as follows:

    <html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

    This changes no-js to js before the page even displays.

    2. Use jQuery to add dummy elements along side your a tags (js to add the dummy element is in step 3)

    Here is the CSS to use:

    .js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

    3. Fade in and out the new dummy element on mouseenter and mouseleave

    $('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

    Finally, be careful if you decide to use an image background instead of the solid color. IE7 and IE8 cannot alter the opacity of 24bit PNG files. It completely screws up the transparency.

    • 0