CSS菜单下划线动画

文章/答案/技术大牛

发布

1回答

单击时暂停菜单动画，下次单击时恢复

jquery、animation、menu

我有一个菜单动画，我正在鼠标悬停上使用，效果很好，但我不太确定如何继续。当链接悬停在上方时，div的宽度将被设置为动画，模拟动画下划线。我希望如果该菜单项被单击，动画就会停止，本质上是保持该菜单项的下划线，但如果单击任何其他菜单项，动画就会恢复。这是用在一个单页面的网站上，我基本上想指出的是，用户在网站的哪个部分。class="underlinecontact">

浏览 1提问于2013-06-04得票数 0

回答已采纳

2回答

我正在尝试遵循codepen上的教程，当用户将鼠标悬停在导航栏中的链接上时，可以制作动画下划线。目前，我已经显示了这一行，但只在整个导航列表下显示了一个下划线。link-ltr:hover::before {} <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel=

浏览 25提问于2021-05-12得票数 0

回答已采纳

1回答

CSS菜单Hover下划线动画

javascript、jquery、html、css

我试图创建一个下划线动画时，悬停在菜单项(基于这个)。由于某种原因，我所有的菜单项都是下划线，而不是在悬停时只有一个。我只想要在菜单上下划线，而不是所有的东西。

浏览 0提问于2018-12-22得票数 2

回答已采纳

1回答

<a>标签的偏移量，距离只有几个像素。

javascript、jquery、html、css

我想为我的菜单栏创建一个简单的虚线下划线动画，因此我编写了以下HTML： width = $(this).outerWidth(); $('.underline')

浏览 4提问于2016-06-27得票数 4

回答已采纳

2回答

如何在Hover上制作反应动画？

javascript、reactjs、animation、react-motion

我需要移动菜单项下划线，就像在这个。我正试图用React来制作这样的动画。经过谷歌的研究，我发现了流行的动画反应运动库。但我找不到如何在悬停时触发动画的方法。

浏览 1提问于2018-10-03得票数 2

回答已采纳

2回答

固定移动设备上动画下划线的宽度

html、css、twitter-bootstrap

我已经阅读了这篇短文，其中解释了如何在悬停时创建动画下划线。在桌面上一切正常，但在移动设备上，下划线将在菜单元素下占据100%的宽度。是可以修复的吗？下面是我使用的css代码： position: relative;} color: rgb(28,67,63);.top

浏览 1提问于2019-10-01得票数 1

1回答

带有Turbolinks的Rails 5中的材质选项卡

javascript、css、ruby-on-rails、material-design、turbolinks

我想做这样的事情:在我的Rails应用程序中使用作为菜单。滑块(下划线)的滑动动画应该会播放，页面应该会同时加载。我设法让滑块在我点击的链接下移动，方法是将菜单设置为data-turbolinks-permanent，但我为滑块设置的过渡不播放-它只是跳跃。我也尝试使用jquery.animate来代替过渡，但是动画非常延迟、缓慢和不稳定。有没有办法用Turbolinks实现这一点？('width', $(this).width()) slider.css(&

浏览 2提问于2017-02-25得票数 1

1回答

下划线css3转换

css、css-transitions、underline

如何在hover ( CSS3 )中从左到右创建下划线动画？

浏览 2提问于2013-03-19得票数 13

回答已采纳

3回答

带有伪css的下划线菜单锚动画

css、animation、css-animations

我在制作菜单项时遇到了困难， <span class="nav-item">EN</span> </nav> CSS

浏览 5提问于2016-03-14得票数 0

回答已采纳

3回答

菜单的伪下划线选择器

html、css

我有一个水平列表菜单，我想在上面使用伪选择器:当你将鼠标悬停在菜单项上时，它应该有一个粗大的颜色下划线。每个菜单项都有不同的宽度，其下划线效果应与该宽度匹配下面是我的清单： <div id="otherTable"> <li>

浏览 2提问于2012-11-01得票数 0

回答已采纳

1回答

为什么这种SVG形状在Chrome上的工作方式与Safari不同？

html、css、svg

width="320" /> </svg> </div>CSS

浏览 8提问于2014-03-02得票数 1

1回答

基于鼠标滚轮滚动内容设置活动文本链接+将文本链接链接到每个鼠标滚轮滚动内容

javascript、jquery、css

我知道这是一个JS/ jQuery问题，我有很好的CSS技能，但遗憾的是，我的JS知识让我失败了。我最近为我的投资组合买了一个网站模板。这是一个很好的选择，但我真的很难适应它。即项目3将打开项目3内容(带有内容动画)。首先，我尝试针对内容块的每个ID。也就是说，id="project-3“然后添加href="#project-3”，但这显然是行不通的。

浏览 4提问于2020-11-05得票数 0

1回答

悬停时的NavLink下划线动画

css、reactjs、css-animations、react-bootstrap

当一个NavLink (来自反身带)像这样在上面盘旋时，我很新的反应，并试图找出如何动画一个下划线：从，我能够得到下划线工作在悬停，但没有使用动画。我看到的关于如何在普通DOM中完成类似任务的所有示例都使用CSS伪元素::before或::after，但从我的尝试来看，这些示例似乎不起作用。有什么建议吗？

浏览 4提问于2022-09-09得票数 0

2回答

我希望我的菜单在活动时有突出显示，而不是只是悬停。这有可能吗？(非常规下划线代码)

html、css

因此，我使用了一些我在CodePen上找到的CSS代码，在我的网站菜单上有一个漂亮的下划线，所以它没有使用应用于链接的常规下划线。目前，它被设置为在带有轻微动画效果的悬停时加下划线，但我希望它在活动时加下划线，而不是悬停。我尝试过使用多种方法来绕过它，但由于它不完全是我的下划线代码，所以有些部分让我感到困惑。有人能帮帮忙吗？a href="faq.html">FAQ</a></li>

浏览 1提问于2018-05-03得票数 0

1回答

悬停和活动时加粗下划线

html、css、hover、underline

我正在尝试制作一个简单的导航菜单，其中包含带有动画下划线的链接，如Tobias Ahlin 所演示的那样。 <li><a href="#">Contact</a></li

浏览 0提问于2017-07-18得票数 1

回答已采纳

1回答

试图使下划线相对于SCSS中的导航菜单项开始

html、css、sass

我试图实现一个菜单导航栏，在悬停突出显示菜单项从左到右的下划线动画。我已经尝试过寻找解决这个问题的方法，但是我不知道我做错了什么。kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/">factmag.com</a></small> <&#

浏览 1提问于2015-03-23得票数 0

回答已采纳

3回答