Home > DeveloperSection > Forums > Irritating magnify effect on mouse hover
Goti Bandu

Total Post:119

Points:835
Posted on    June-15-2013 1:29 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 693  View(s)
Rate this:
Hi Expert,

I have three link enclosed with ul li tag.I want my each link to magnify when someone mouse hover it. I know it can be done using absolute positioning and z-index. I tried something but I am not getting it right.T he problem with my jsFiddle is the 2nd li element after magnifying takes two line.

Can someone help me with it.

Here is my HTML

<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About us</a> </li>
<li> <a href="#">Contact us</a> </li>
</ul>

Here is my Jquery

$(function(){
var t = 10;
$('li').each(function(e,i){
    $(this).offset({top:50,left:t});
    t+=100;
});

$('a').hover(function(){
    $(this).animate({'z-index':'1','font-size':'30px'},50);
      },
      function(){
          $(this).animate({'z-index':'0','font-size':'15px'},50);
    });
});

Here is CSS :

a {
text-decoration:none;
font-size: 15px;
}
ul {
list-style-type:none;
}
li {
padding-left: 50px;
width:100px;
text-align:center;
position:absolute;
}

Thanks in advance for any recommendations or solutions.


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-15-2013 3:56 AM

Hi Expert,

you have to modify your css to adjust the white-space

li {
    padding-left: 50px;
    width:100px;
    text-align:center;
    position:absolute;
    white-space:nowrap;
}


Don't want to miss updates? Please click the below button!

Follow MindStick