正文 

当前位置： 首页 > 源码 >

放大鼠标悬停效果

     2023-05-08     266

关键词：

【中文标题】放大鼠标悬停效果【英文标题】：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 看起来好多了。谢谢你的好建议。你能告诉我如何使用绝对定位来做到这一点。 问另一个问题并标记这个问题已回答.. 这里的问题应该是具体的，它们不是获得免费支持的大门！您需要先尝试一些事情，当问题甚至与此无关时，我不能只向您解释绝对定位。现在在答案中有一个例子，但你必须有理由在左浮动技术上使用它

css实现鼠标悬停在图片上图片缓慢缩放效果

 方法一：.container{　　background-size:100%100%;　　transition:all2s;}.container:hover{　　background-size:120%120%;} 方法二：img{　　transition:all2s;}img:hover{　　transform:scale(1.2);  //图片放大的倍 查看详情

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

html鼠标悬停左侧缩小图片放大到右边首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为... 查看详情

鼠标悬停，图片放大

代码转载：http://blog.csdn.net/u014175572/article/details/51535768示例：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">div{width: 查看详情

Javascript：在没有 Jquery 或插件的情况下放大鼠标悬停

】Javascript：在没有Jquery或插件的情况下放大鼠标悬停【英文标题】：Javascript:ZoominonmouseoverWITHOUTJqueryorplugins【发布时间】：2016-02-2200:25:17【问题描述】：我已经到处找了好几个星期了，但我根本找不到任何东西来告诉我我做错了... 查看详情

鼠标悬停时仅显示当前卡片悬停效果

】鼠标悬停时仅显示当前卡片悬停效果【英文标题】：onmouseovershowonlycurrentcardhovereffect【发布时间】：2021-07-0300:07:39【问题描述】：。目前，如果我的鼠标移到卡片上，那么它会显示每张卡片的效果。这在VueNuxtjs中怎么可能？我... 查看详情

放大图像同时保持鼠标悬停尺寸的 React 组件 - React + Bootstrap

】放大图像同时保持鼠标悬停尺寸的React组件-React+Bootstrap【英文标题】：Reactcomponentthatzoomsintoanimagewhilekeepingdimensionsonmouseover-React+Bootstrap【发布时间】：2020-11-2006:18:39【问题描述】：所以过去几天我一直在寻找所有地方，但找不... 查看详情

html图片鼠标悬停效果设置！

...我想当鼠标悬停在图片上面的时候，这个图片会突出或者放大！求代码！http://www.internetke.com/jsEffects/2015012104/类似这类效果！@charset"utf-8";/*科e互联特效基本框架CSS*/body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,ta... 查看详情

鼠标悬停效果工具提示

】鼠标悬停效果工具提示【英文标题】：hovereffecttooltipfollowingmouse【发布时间】：2022-01-0618:29:04【问题描述】：我对css没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。... 查看详情

删除 WPF 中 ListView 上的鼠标悬停效果

】删除WPF中ListView上的鼠标悬停效果【英文标题】：RemovethemouseovereffectonaListViewinWPF【发布时间】：2013-06-1520:06:13【问题描述】：如何让我的ListView上的淡蓝色鼠标悬停效果？当我触摸屏幕时，会出现一个淡蓝色选择器，并在我上... 查看详情

html+css鼠标悬停效果

HTML+CSS实现鼠标悬停效果HTML：<linkhref="style.css"rel="stylesheet"><aclass="social"href="https://webbb.be"target="_blank"><divclass="front"><iclass="fafa-facebook"></i></div&g 查看详情

鼠标悬停图片移动的效果

...购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果，实现代码很简单，就用css3的transform便可实现。下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。css... 查看详情

IE8 上的鼠标悬停/悬停效果缓慢

】IE8上的鼠标悬停/悬停效果缓慢【英文标题】：Mouseover/hovereffectslowonIE8【发布时间】：2010-12-0408:14:10【问题描述】：我注意到在IE8中使用鼠标悬停事件时有一个奇怪的性能问题，该表有很多行（本例中为100行）。我尝试了很多... 查看详情

在鼠标悬停时创建圆形火焰效果

】在鼠标悬停时创建圆形火焰效果【英文标题】：Createroundedfireeffectonmouseover【发布时间】：2019-01-0616:15:24【问题描述】：在Hobbit\'s网站偶然发现了一个漂亮的火焰效果。这个效果我实际上只在游戏中看到过。有两个带有left和righ... 查看详情

翻转效果：用鼠标悬停改变图片

】翻转效果：用鼠标悬停改变图片【英文标题】：RolloverEffect:ChangePicturewithMousehover【发布时间】：2018-02-1811:17:48【问题描述】：我正在尝试创建一个可以改变图片的悬停。很多教程告诉我尝试onmouseover和onmouseout。但是Brackets（我... 查看详情

easyuidatagrid鼠标的悬停效果

/*easyui，鼠标划过悬浮，显示一个小提示框的方法*/{field:‘goodsName‘,title:‘标的描述‘,width:200,align:‘center‘,formatter:function(value){return"<spantitle=‘"+value+"‘>"+value+"</span>";}} 效果图:  &nbs 查看详情

如何使用css在鼠标悬停时缩放图像？

图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS在本... 查看详情

鼠标悬停tip效果如何用css实现？

参考技术A鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不... 查看详情

子控件的 WPF 鼠标悬停触发效果

】子控件的WPF鼠标悬停触发效果【英文标题】：WPFMouseoverTriggerEffectforChildControls【发布时间】：2011-12-0118:47:51【问题描述】：假设我有这段代码：<Window><Window.Resources><Colorx:Key="MyColor"A="255"R="152"G="152"B="152"/><DropShadow... 查看详情