Hi everyone , I'm a bit new with jQuery and whole thing , trying to figure out jQuery magic I got a function for my website( in progress )...here it is- CSS: #orbtop {width: 83px; height:83px; display: block; position: relative; margin: 0 auto; text-indent: -99999px; text-align: center; top: -47px; background: url(theme/rb-ff.png) no-repeat;} #orbtop:hover {width: 83px; height:83px; display: block; top: -47px; text-align: center; background: url(theme/rb-on.png) no-repeat;} Code (markup): HTML: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('#orbtop ').append('<div id="orbtop"></div>').each(function () { var $span = $('> #orbtop:hover', back-to-top).css('opacity', 0); $(orbtop).hover(function () { $orbtop.stop().fadeTo(500, 1); }, function () { $orbtop.stop().fadeTo(500, 0); }); }); }); </script> </head> <body> <a href="#" title="To the top!"><div id="orbtop">Back to Top!</div></a> </body> </html> HTML: As you see is a bit messed up , I'm trying to fix it ... Frankly I need a :hover fade effect , without that .span :/ I'm stuck there . Thanks on your time and help, Macas
maybe you can try this, $(document).ready(function() { $('#orbtop ').hover(function(){ //do onmouseover effect here // use $(this) to refer to #orbtop object },function(){ //do onmouseout effect here }); }); Code (markup):