converting css hover to jquery hover

StackOverflow https://stackoverflow.com/questions/1851141

  •  13-09-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

You'll need the jquery color animation plugin: http://plugins.jquery.com/project/color

And then some code like this

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

EDIT:

Per dcneiner's comment, if you want the final color to be none, you'd have to add a callback function to the animation to change the color to "none" after it's done animating. I'm guessing animating to "none" is undefined. You can change #fff to a color close to your background to help smooth the final transition.

The animate signature is:

animate(params, [duration], [easing], [callback])
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top