Margin change causes multiple divs to be affected

Shriw

New Member
I want my logo image to move up without effecting the wording below it, but both elements are triggered even though they're in different divs, wrapped in a parent div. I don't get it. I'm assuming it has something to do with the margins, but when I tried to reverse set the opposite values for the text elements things acted strangely.A FiddleCSS:\[code\].full-circle {display:block;margin:auto;margin-top: 15px;overflow: hidden;height: 180px;width: 180px;border: 2px solid #FFF;-moz-border-radius: 90px;-webkit-border-radius: 90px;background:#FDF5E6;-webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out;}.full-circle:hover{margin-top: 2px;}\[/code\]jQuery:\[code\]$('.full-circle').hover( function(){ $(this).stop().animate( {marginTop: '2'}, 20, 'linear' );//end animate },//end function function(){ $(this).stop().animate( {marginTop: '15'}, 20, 'linear' );//end animate }//end function );//end hover\[/code\]
 
Back
Top