放大鼠标悬停效果

Posted

技术标签:

【中文标题】放大鼠标悬停效果【英文标题】:magnify effect on mouse hover 【发布时间】:2013-05-06 11:48:48 【问题描述】:

我有一个包含几个链接的导航栏。我希望在鼠标悬停时放大(增加大小)的链接。我希望其他链接处于各自的位置。我为此编写了以下代码。

这里是html

<ul>
<li> <a href="#">Link 1 </a> </li>
<li> <a href="#">Link 2 </a> </li>
<li> <a href="#">Link 3 </a> </li>
</ul>

css代码:

a 
text-decoration:none;
font-size: 15px;

ul 
list-style-type:none;
 
li 
display: inline;
padding-left: 50px;

这里是悬停效果的jquery

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

这是上面Demo的jsfiddle链接

我没有得到想要的效果。我错过了什么?以及如何在这个缩放过程​​中使用 animate() ?

【问题讨论】:

【参考方案1】:

您可以非常轻松地制作动画:

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

例如:

http://jsfiddle.net/m9tHb/1/

对于你目前拥有的东西,你还有什么不喜欢的?

停止其他链接移动:

我不是 CSS 专家,但是通过设置 li 元素的宽度并让它们向左浮动(从左侧向上堆叠),它们不会移动:

li 
    padding-left: 50px;
    width:100px;
    float:left;

http://jsfiddle.net/m9tHb/3/

虽然我确信有很多方法可以做到这一点..你只是想确保改变元素的大小不会影响其他任何东西..例如你可以使用绝对定位。

附:刚刚注意到将 li 中的文本居中对齐使它看起来更好;)

text-align:center;

jsfiddle:

http://jsfiddle.net/m9tHb/4/

编辑:和绝对定位的例子:

http://jsfiddle.net/m9tHb/5/

【讨论】:

在鼠标悬停时我不希望其他链接改变它的位置。目前,当我将鼠标放在链接 1 上时,链接 2 和链接 3 的位置也受到影响 text-align:centre 看起来好多了。谢谢你的好建议。你能告诉我如何使用绝对定位来做到这一点。 问另一个问题并标记这个问题已回答.. 这里的问题应该是具体的,它们不是获得免费支持的大门!您需要先尝试一些事情,当问题甚至与此无关时,我不能只向您解释绝对定位。现在在答案中有一个例子,但你必须有理由在左浮动技术上使用它

以上是关于放大鼠标悬停效果的主要内容,如果未能解决你的问题,请参考以下文章

html鼠标悬停左侧缩小图片放大到右边

jquery图片放大插件鼠标悬停图片放大效果

HTML+CSS制作鼠标悬停效果

css如何实现鼠标悬停的提示效果

css鼠标悬停时,换图片

js在鼠标悬停的时候放大一张图片