腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
在悬停时滑入链接
javascript
、
hover
、
transition
我想创建以下操作: 当您将鼠标移动到固定在屏幕左侧的导航栏中的一段文本上时,将从页面左侧滑出第二段文本(或一幅图像(如果更容易))。第二文本或图像将位于第一文本或图像下(为效果而可能进行偏移)。在鼠标关闭时,上面的效果将相反,您将只剩下第一段文字。 我希望这是有意义的,我一直在寻找过渡和悬停在网上的效果,但我无法完全找到我所设想的。
浏览 3
提问于2013-09-18
得票数 0
回答已采纳
2
回答
在悬停图像上将文本移动到左侧
html
、
css
、
css-transitions
当我在图片上方盘旋时,我有一些文本想要移到右边 <div class="container-fluid"> <div class="info-over"> <div class="infoText"> Text that need to move to the right </div> <img src="http://lorempixel.com/300/200" alt="Avatar" class="im
浏览 2
提问于2018-01-15
得票数 2
回答已采纳
2
回答
在css中更改悬停时和过渡期间的文本不透明度
html
、
css
我有一个包含文本的图像,它最初是隐藏的(下面的例子"hello“是初始隐藏的)。 当我将鼠标悬停在文本上时,它应该会显示出来。 此外,我正在使用“过渡”将图像从一个位置移动到另一个位置。 当图像从一个位置移动到另一个位置时,文本的悬停效果应该保持不变。 在下面的例子中,我希望文本"hello“具有上面的效果。 <div id="image-3"> <img src="sample.jpg" height="110" width="110"> <div>
浏览 0
提问于2017-02-25
得票数 0
1
回答
如何使用react-spring的转换来实现暂停和恢复功能?
reactjs
、
react-spring
我们需要在react中显示过渡,在鼠标悬停时,我们必须停止过渡,当我们移出鼠标时,它应该恢复吗? 我们可以显示转换,但无法实现暂停和恢复功能。 任何建议都会有所帮助。 谢谢
浏览 4
提问于2018-11-16
得票数 0
2
回答
CSS3转换帮助
css
、
transitions
我似乎无法理解这一点,但我相信这很简单.. 基本上我有一些这样的文本: DJDM,这是我名字的首字母。我正在尝试做的是,当你将鼠标悬停在其中一个字母上时,使用CSS3转换在它旁边显示全名。所以如果你将鼠标悬停在D上,你会得到DanielJDM。 我希望过渡慢慢地移动其余的字母,使单词的其余部分增加不透明度,直到它完全可见。 我相信有办法做到这一点我只是现在想不出来.. 如果能帮上忙我会很感激!谢谢。
浏览 0
提问于2011-09-09
得票数 1
回答已采纳
4
回答
css在浏览器调整大小时转换“触发器”
html
、
css
、
css-transitions
当你首先通过媒体查询从移动端转到桌面端时,我想不出如何避免执行css转换。 我想有和悬停过渡,但也当你悬停在svg的标志等。我有一个较小的移动标志,并为桌面较大。但过渡会影响新的宽度,并触发悬停过渡。 当通过媒体查询应用新样式时,您是否知道如何避免转换为“执行”。 我已经用我的问题做了一个例子。 <div class="logo"></div> .logo { width:100px; height:100px; background: red; } @media only screen and (min-width: 525
浏览 4
提问于2015-01-29
得票数 3
1
回答
在javascript中为特定属性设置转换不起作用
javascript
、
dom
、
properties
、
transition
、
translate
当悬停一些文本来改变颜色时,我在CSS中使用了transition(0.3s),但我也在Javascript中使用了transition来“翻译”文本。我现在的问题是,当我悬停它们时,它们不再使用CSS (0.3s)中的过渡,而是我在javascript中设置的过渡。我尝试使用element.style.transition = "translate 5.4s ease“,或者在css中为特定属性设置延迟,但在vain.How中,我只能为translate设置Js中的过渡吗?提前谢谢你 CSS social-media-texts p { position:relative;
浏览 14
提问于2021-07-03
得票数 0
1
回答
在折叠面板标题中应用过渡
html
、
css
我在我的html页面中有一个手风琴,我需要移动标题(面板标题)内的文本,以便使用css3转换在悬停时向右移动一点 我尝试过的内容如下所示 HTML <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading headtext"> <h4 class="panel-title"> <a data-toggle=
浏览 1
提问于2014-01-21
得票数 0
1
回答
工具提示和css过渡
css
、
css-transitions
我希望当鼠标悬停在工具提示上时,工具提示文本会过渡,但我不希望在鼠标悬停在工具提示文本本身所在的空间时显示工具提示文本。 如果禁用'visibility: hidden‘,则过渡是平滑的,但工具提示文本所在的空间将变为可交互的。如果'visibility: hidden‘保持不变,则转换的执行效果很差。我希望过渡工作没有空间的工具提示文本所在的位置,以响应悬停。 .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { /* visibility: h
浏览 8
提问于2021-06-20
得票数 0
2
回答
如何在鼠标悬停时反转按钮渐变
html
、
css
当鼠标悬停在按钮上时,如何反转渐变?点击这里的“阅读更多”按钮,就可以看到这个效果:。请注意,当您将鼠标悬停在按钮上时,黄色将向左移动,粉色将向右移动。 我试着关闭按钮容器上的过渡,看看是不是这样做的,但即使禁用了它,悬停效果仍然存在。 当鼠标悬停在按钮上时,我希望黄色现在在左边,粉色在右边(这样颠倒过来)
浏览 0
提问于2019-05-14
得票数 0
1
回答
如何向过渡中添加文本
css
、
transitions
我刚开始接触复杂的编程,我知道CSS和HTML的基础知识,我开始学习更复杂的东西,比如过渡和动画,但我已经被一些东西卡住了一段时间。您到底如何向过渡中添加文本?例如,您向div元素添加了一个过渡,它向下滑动,没有任何东西,但您想要在它向下滑动时添加文本。如何添加文本?我不确定这有多清楚,如果它混淆了一些,我道歉!但在基本情况下,我想要做的是当你将鼠标悬停在它上面时,让过渡向下滑动(我已经做到了),并使文本只在你悬停时出现(就像在新暴露的区域中,过渡产生了!)如果可以,请帮助我!感谢您阅读c:
浏览 0
提问于2015-05-09
得票数 0
2
回答
链接悬停导致在Chrome中背景大小: cover;移动
google-chrome
、
css
、
background
、
hover
、
css-transitions
使用CSS3,我设置了一个背景图片作为封面。当第一次在Chrome中加载页面并将鼠标悬停在链接上时,文本周围的背景会稍微移动(但相当明显)。我使用的是一个悬停的过渡,但是背景移动也会随着过渡的移除而发生。 我的猜测是在悬停期间背景正在调整大小,但我不确定如何防止这种情况发生。一旦它移动了,你可以滚动其他链接而不会有任何问题。刷新页面后,问题仍然存在。 网站在这里: 样式是这样的: body{ text-align: center; margin: 0 auto; color: white; font: bold 80pt 'Economica',
浏览 2
提问于2012-06-03
得票数 6
2
回答
播放视频并显示悬停在图像上的文本
javascript
、
css
、
hover
、
overlay
、
mp4
我正在寻找一种方法来实现悬停在一个图像上,触发播放视频。当鼠标不再停留在图像上时,图像(poster?)应该再次显示。视频上也应该有文字显示。请看下面来自Loop的例子。他们在他们的案例中有这种悬停效应。我用imageoverlay或poster image尝试了多种解决方案,但它们都不能让我顺利地从图像过渡到视频。请参阅下面的代码。 我不知道如何在图像/视频的顶部添加文本,在悬停时获得这种“探索”文本,就像Loop:中的示例(将鼠标悬停在“数字”上可以看到效果)。 编辑1:在这里:agentur-loop.com/case他们有一个非常平滑的悬停从图像到视频的过渡,如果我将鼠标移出视频,它会
浏览 0
提问于2019-04-02
得票数 0
1
回答
Bootstrap 4转换的持续时间值是多少?
bootstrap-4
、
css-transitions
、
duration
鼠标悬停时按钮颜色的过渡变化或的切换移动都被定义为CSS过渡。我的问题是,我可以在Bootstrap的哪个(S)文件中查找这些持续时间的值? (对于按钮,感觉就像0.2s,折叠动画会更长一点,我会说在.4附近),但我需要确切的值。
浏览 6
提问于2018-07-17
得票数 0
回答已采纳
2
回答
CSS:防止属性在转换结束前对元素产生影响
css
、
css-transitions
、
z-index
我们有一些盒子来显示悬停的一些数据。所以,当我们在一个元素上移动鼠标时,它应该展开,位于其他元素的前面,并显示隐藏的数据。 我做了这样的事: box:hover { z-index: 50; } 但是有一个问题:当我们在另一个外部空白上移动鼠标时,z-index将返回到与其他值相同的值。可见,悬浮元素在下层比下一层低。 如何防止属性应用,直到过渡结束? 这是我的。尝试在一个元素上悬停,将鼠标移出元素,其他元素的背景图像将在过渡结束之前出现在我们的悬停元素前面。 更新:这是问题的屏幕截图。这是我们解开元素的时候。另一个元素的background-image出现在我们的悬停元素前面。
浏览 4
提问于2015-06-08
得票数 6
回答已采纳
1
回答
为什么一个<div>中的元素在不同的时间进行颜色转换?
html
、
css
、
hover
在第一个里面我有段落,第二个(内部)也有段落。 这两个段落都有蓝色文本,当鼠标悬停在第一个段落上(悬停)时,颜色变为红色。颜色过渡是动画效果。 我的问题是两个段落的颜色不会同时改变。第二次在第一次之后变红。我需要在同一时间过渡。 为了避免问题,我必须将第二段从内部移到第一段。或者从CSS中删除star* (下面的示例代码)。 在我的实际情况下,情况更复杂,我不能从内部移动段落。从CSS中删除star也没什么变化。 问题在Chrome上比在FireFox上更明显。 我不能展示真实的例子,所以下面是一个简单的例子。但它显示了我在延迟第二段过渡方面的问题。 .first_div {color:
浏览 14
提问于2019-04-26
得票数 2
回答已采纳
2
回答
div悬停上的CSS过渡内部div元素
css
、
css-transitions
、
css-animations
当悬停发生时,我想改变div中某些文本的不透明度: 目前,我的过渡看起来是这样的,它只是将盒子向上移动了一点: .bg-onebyone { transition: all 0.5s ease; background: #17B6A4 none repeat scroll 0% 0% !important; } .bg-onebyone:hover { margin-top: -8px; } 在我的div.bg-one中,我有另一个div保存这样的文本 .bg-onebyone .widget-stats .stats-icon { color: #FFF;
浏览 3
提问于2015-09-21
得票数 1
回答已采纳
1
回答
尚未完成时,Css转换不会顺利地返回。
css
、
hover
、
css-transitions
我有一个背景图像,当:悬停时,它会更改为另一个图像。 我用过渡来显示这种效果。 当转换完成时,当失去焦点时,我的旧图像将使用相同的转换(而不是悬停)。 请参阅一个工作示例(使用铬): 我的问题是:当我把鼠标移出一半进入第一个过渡时,第二个过渡效果就不会发生了。您可以尝试此操作,将鼠标移动到图像中一秒钟,然后将其移出图像。我怎样才能让事情顺利进行呢? 注意:当我使用颜色而不是图像时,这种效果确实以我假装的方式起作用。
浏览 0
提问于2012-06-27
得票数 0
回答已采纳
2
回答
为移动文本进行平滑过渡
html
、
css
下面是我创建的一个餐厅菜单的简化版本。当你将鼠标悬停在菜肴上时,菜肴的描述就会出现,我创建了一个过渡来使它更平滑。 下一道菜是下面的菜单项,当上面菜单项的描述显示时,下一菜单项将被按下。我想创建一个过渡,以便下面的文本在页面上更平滑地向下移动,而不是立即从一个位置更改到另一个位置,因为这在页面上看起来相当有问题(如果这有任何意义的话)。 我也想让不透明度过渡可以双向工作--现在,当我将鼠标悬停在项目上时,它可以工作,但当我把鼠标从项目上移开时,它会立即消失,所以过渡目前不能双向工作。我试过使用not hover函数,但没有成功。 下面是我的代码: HTML: <html> <
浏览 0
提问于2018-11-01
得票数 1
3
回答
使用CSS3触摸事件的悬停效果
mobile
、
css
、
css-transitions
我正在使用CSS3悬停和过渡来显示和隐藏图像。在移动设备上,我想对触摸事件使用相同的过渡。 基本上,第一次触摸将执行悬停效果或翻转,而触摸将执行滚动。 我不想使用JavaScript来做这件事。如果有一种方法可以用纯CSS3实现,那将是最好的选择。
浏览 2
提问于2011-12-01
得票数 40
1
回答
缩聚半透明覆盖层
html
、
css
、
css-transitions
、
css-shapes
我想用存在于这个CSS3中的来创建这个效果。 在这个页面中,有四个圆形图像有一个美丽和先进的效果。其效果是半透明覆盖在图像顶部,当图像在上悬停时移动/缩小。最初,图像是透明的(没有覆盖),当悬停过渡完成时,图像得到半透明的覆盖。
浏览 3
提问于2015-11-23
得票数 2
回答已采纳
1
回答
为什么这个CSS转换不完成它的移动
jquery
、
css
、
css-transitions
、
css-animations
我有一个按钮,可以在悬停时进行转换。但不知何故,它有时并没有完成它的过渡。它走到一半,然后停下来或被困在那里。我怎样才能迫使它完全过渡,一旦它被悬停? div.shuffle { background-image: url(https://goo.gl/PydgT2); background-color: transparent; width: 32px; height: 32px; transition: all 0.3s linear; } div.shuffle:hover { transform: rotateX(180deg); -webkit-tra
浏览 2
提问于2016-01-23
得票数 3
回答已采纳
2
回答
文本从左到右显示
css
、
css-transitions
我希望在图像悬停时出现图像的标题(这并不是真正的标题)。文本应该从左到右显示,因此当图像悬停时,它的容器应该在X轴上生长。我已经能够使文本出现在悬停,但过渡效果是我被困的地方。 这就是我尝试过的: CSS: .morbid { display: none; margin-left:10px; } a:hover + .morbid { position:relative; display: block; } HTML: <a> <img src='.../goals/sia.png'> </a> <div cla
浏览 5
提问于2015-10-15
得票数 2
4
回答
显示div,并在过渡悬停时隐藏另一个
css
我已经搜索了其他问题,但是没有人给出我想要的结果。 我试图:悬停以显示另一个div,同时也隐藏另一个div。我不能把所有的div都封装在一个父div中,因为我想要隐藏的div是:悬停将触发显示/隐藏.另外,用一个很好的过渡来完成它。 只有在“悬停我”文本上盘旋时,显示/隐藏触发器才会出现。 .remove_me类和文本“让我消失”并没有消失:悬停。这是我无法做到的。 CSS .hover_me { cursor:pointer; -webkit-transition: .4s; transition: .4s; display:block; heigh
浏览 0
提问于2015-11-17
得票数 0
1
回答
导航栏悬停过渡鼠标悬停问题
css
、
navbar
、
transition
我已经做了悬停时的过渡(当我在导航栏上悬停时宽度较大,主要内容在右侧站点上移动了一点)。然而,不幸的是,主要内容在页面刷新上移动,这是我想要避免的。你知道怎么写代码吗:鼠标悬停转回效果? .navbar:hover+main { margin-left: 10rem; } .navbar + main { transition: 1s; } 它确实可以在小提琴上正常工作:不幸的是,http://jsfiddle.net/47d5ujym/不能在Opera,Chrome或Firefox上正常工作
浏览 13
提问于2020-07-16
得票数 0
2
回答
动画结束后的CSS过渡
css
、
animation
、
css-animations
我有一个在悬停时移动元素的css过渡,以及一个在悬停时旋转元素的动画。动画的延迟等于过渡持续时间,因此在过渡到正确的位置后,动画开始。然而,当我们将鼠标移走时,动画会停止,但不会向下过渡,效果很好。 在鼠标移开和动画结束后,有没有可能让它转回来? 您可以在这里看到一个示例: 简化代码如下: div { width: 200px; height: 200px; margin: 40px auto; background-color: #b00; position: relative; &am
浏览 1
提问于2015-11-20
得票数 4
回答已采纳
6
回答
CSS3过渡到不影响其他元素?
html
、
css
、
positioning
、
css-transitions
有没有可能有不影响附近元素位置的高度转换? 这种特殊的情况涉及到了带有float:left的div。 演示: 我希望将悬停过渡放在您可以看到的移动元素的顶部。
浏览 0
提问于2012-09-15
得票数 5
回答已采纳
1
回答
如何平滑过渡?
css
我正在尝试创建两个容器,它们将被放置在相同的位置。当我将鼠标悬停在顶部时,应该会显示一些过渡和底部/第二个div内容。我试过这个 一切都是fine.But,当我鼠标悬停在它上面时,它会产生一些闪烁的效果。如何让它平稳过渡?我使用下面的代码片段来实现过渡效果 .box:hover{ -webkit-transform: rotate(100deg) scale(1); -webkit-transform-origin:bottom right; }
浏览 1
提问于2014-03-04
得票数 5
回答已采纳
2
回答
CSS Hover抖动问题
html
、
css
这是我的第一个问题。我通常试着好好研究这些东西,但这件事让我发疯了。 我需要能够做一些和你看到的非常相似的事情(悬停在盒子上): 问题在于我所得到的抖动。看起来很不专业。 我想使用CSS和HTML (而不是图片),因为最终会发生的是在框后会出现单词,通过悬停,您将看到一个翻译。 我已经看到的是,保持字体不变,删除粗体文本等。在这里,整个div正在改变,而不仅仅是文本。我还看到了“过渡技巧”,其中增加了过渡之间的时间。问题是,当鼠标在div上方休息时,它处于“非悬停”状态。 提前谢谢!
浏览 3
提问于2013-08-30
得票数 0
回答已采纳
2
回答
我怎样才能做一个“不悬停”动画?
html
、
css
当有人在我的旗帜上盘旋时,我想使用转换+转换。这里的例子是: #banner:hover { transition: all 300ms; transform: scale(1.01, 1.01); } 但是当我在横幅上退出鼠标时,它突然又变成了缩放(1,1),但是没有转换。我尝试过:不是(悬停),但是当我刷新页面时,横幅就会发生转换。看看怎么解决这个问题。我想要的只是当我悬停在上面的时候有一个转变,当我把鼠标从横幅上移开的时候,任何其他的东西。 我看到了一些疑问,所以我要澄清它们。我只想要一个过渡,当我悬停横幅和当我退出移动悬停,一个过渡回到他的第一个尺度。我在#横幅和#横幅中都有这样的代
浏览 4
提问于2020-07-31
得票数 0
回答已采纳
0
回答
如果图像有过渡效果,如何在图像上创建悬停框?
css
我一直在尝试让一个带有文本的悬停框在用户悬停在图像上时出现在它的上方。问题是,我的图像有一个过渡效果,当用户悬停在上面时,它会变得更大。我需要用悬停框来模拟同样的事情,但我在定位和过渡方面遇到了困难。 下面是我的代码: .img__wrap { position: relative; height: 200px; } .img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #fff; opacity: 1; visibility: hi
浏览 2
提问于2017-06-13
得票数 0
回答已采纳
2
回答
在移动设备中禁用悬停
css
我有这些类,所以当我悬停一个项目时,它会做一个转换,问题是当我在移动视图中时,它会退出浏览 .ftContainerOut { padding-right:10px; padding-bottom:20px; transition: all 0.5s ease-in-out; position: relative; cursor:pointer; z-index:1; } .ftContainerOut:hover { transform: scale(1.5); z-index:10; } 我试着在手机上禁用它,但它不工作,只有在正常情况下,过渡卡住了 @me
浏览 0
提问于2016-06-15
得票数 0
4
回答
jQuery UI ToggleClass CSS悬停
jquery
、
css
、
jquery-ui
、
hover
、
toggleclass
我在有一个网站(未完成)。当我悬停“测试产品”时,会出现一个放大镜。到现在为止还好。 淡入-但在CSS中保持悬停 我希望过渡顺利,有效的淡出。我仍然希望在CSS中保留尽可能多的内容,并在jQuery / jQuery UI中进行延迟/淡入。 我在我的站点上使用了以下代码: $("li.item a").hover(function() { $(this).toggleClass("hover", 10000); return false; }); 延迟部分不工作 它几乎成功了。它切换类“悬停”,但延迟部分根本无法工作。过渡是即时的
浏览 7
提问于2011-11-15
得票数 2
回答已采纳
2
回答
CSS悬停过渡不能正常工作
html
、
css
我有一个div。我想在这个div上制作悬停效果的边框。这个边框应该有过渡效果。它工作得很好。但我的问题是,当我从div移动鼠标时,此时边框直接移动,没有任何过渡效果。这是我的div .pending:hover{ -webkit-transition: border .35s ease-in-out; transition: border .35s ease-in-out; border: 2px solid red; } <div class="pending"> <h2>this is title </h
浏览 16
提问于2018-02-08
得票数 0
回答已采纳
3
回答
文本悬停>图像显示是否有过渡?
css
我有这个代码时,在文本悬停,图像弹出,但可以成功地设置转换到它。当我悬停时,图像立即弹出,没有任何过渡。 .link #img { position: absolute; top: -450%; left: 25%; display: none; } .link:hover #img { display: block; } #img { width: 160px; transition: 0.2s linear; } <a href="#" class="link">Photography<img src=&
浏览 5
提问于2017-11-10
得票数 0
回答已采纳
1
回答
有没有办法在重复转换之前添加“降温”延迟或要求用户输入?
html
、
css
、
hover
、
css-transitions
使用CSS时,当图像或框悬停在其上时进行编码时会出现意外的结果。如果鼠标位于过渡开始时的单击区域中,而不是结束时,过渡效果将无限期重复,如果没有延迟,则会卡顿。下面是这个问题的一个简单的html / css演示: div { height: 200px; width: 200px; background-color: red; } div:hover { margin-left: 100px; } <!doctype html> <html> <head> <title> Hover / Transit
浏览 1
提问于2018-09-08
得票数 1
3
回答
jQuery在div负载之间的平稳过渡?
javascript
、
jquery
、
html
、
css
当您将鼠标悬停在按钮上后,我已经得到了一小块jQuery,可以将htm文件加载到div中。下面是它的样子: $(document).ready(function () { $('#webd').mouseenter(function () { $('#opis').load('portfolio/webdDescription.htm'); } ); $('#webd').mouseout(function ()
浏览 7
提问于2013-11-22
得票数 0
回答已采纳
2
回答
CSS过渡不平滑
css
好日子 我在悬停选择器上使用CSS过渡效果,但过渡的第二部分并不平滑-当我将鼠标悬停在元素上时,它会平滑地移动。当我退出悬停时,元素不优雅地回落(不平滑/计时)。我该如何修复它? #login{ margin-top: -10px; margin-left: 10px; display: inline-block; } #login:hover { margin-top: 0px; -webkit-transition: margin-top 0.2s ease-out; -moz-transition: margin-top 0.2
浏览 3
提问于2013-02-20
得票数 4
回答已采纳
3
回答
当使用CSS/HTML + Transitions在图像上盘旋时,如何显示div?
html
、
css
、
hover
、
transition
我正试图实现两件我无法理解的事情: 1)当我在图像上悬停时,如何显示div,最好是具有过渡效果。 2)当用户将鼠标从图像移动到div本身时,如何使div保持不动。 到目前为止,这是我的代码;它没有转换效果,除非div就在图像的旁边,否则当我鼠标移动到它时,它就不会继续运行了。 <style> #Picture { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; width: 375px; height: 375px; } #content { display: none; p
浏览 0
提问于2020-03-17
得票数 0
回答已采纳
1
回答
边框的CSS3过渡
html
、
css
当你将鼠标悬停在列表项上时,我试图为红色边框添加一个过渡,但只有当你悬停在列表项目上时,过渡才会起作用。 有没有可能为红色边框添加一个过渡,这样当你悬停时它就会滑出?以下是代码
浏览 1
提问于2013-02-21
得票数 0
回答已采纳
4
回答
如何在悬停时轻轻改变div背景?
javascript
、
jquery
、
html
、
css
当用户在页面上悬停一个特定的链接时,我正在寻找一种方法来更改页面主体的背景(我计划根据链接悬停将背景更改为不同的颜色),但我打算让这个效果柔和地工作,就像CSS中的过渡效果一样。有什么办法吗?使用JS甚至CSS? 对于悬停效果,我将使用JQuery的悬停函数,但我无法找到任何方法来进行软转换。
浏览 13
提问于2013-08-30
得票数 1
回答已采纳
2
回答
CSS3转换
css
、
background-color
、
css-transitions
当鼠标悬停在按钮/目录标签上时,我希望仅使用CSS3过渡来更改页面的背景颜色。我希望颜色渐变,因此希望使用过渡效果,但我不知道如何将页面的背景颜色与div上的悬停事件联系起来。有没有人能帮我写代码?谢谢
浏览 0
提问于2012-03-18
得票数 0
回答已采纳
1
回答
过盈连接宽度的变化
javascript
、
css
、
hover
、
superfish
我正在为一个我正在开发的网站使用超级香水,我遇到了一个我无法解决的恼人的问题。 基本上,菜单看起来很好,直到您悬停在带有子菜单的菜单项上。我已经启用箭头来指示什么时候有子菜单,但是当您悬停在一个项目上时,文本就会左右移动。我已经寻找悬停特定的风格,但没有什么我能看到的原因。 看起来,锚点的宽度减少了2个像素,这意味着文本移动。我尝试增加一个固定的宽度,看看这是否能解决问题,但问题仍然发生。 另外,在子菜单中,我将文本对齐设置为左对齐,而不是中间--箭头仍在移动,但文本行为正常。我认为这只是由于锚的宽度变化,正如我前面提到的。 我注意到的最后一件事是,当子菜单从“display:none”更改为
浏览 2
提问于2014-04-15
得票数 0
回答已采纳
1
回答
jQuery水平列表滑块- LavaLamp
jquery
、
css
、
slider
、
lavalamp
我一直在尝试重新创建Hitmo网站的“预算”滑块: 但我无法让它像Hitmo滑块一样平稳运行: 我需要的东西: 流畅动画 当标签上的“当前”更改为白色(无文本阴影) addClass时,将文本的颜色更改为? “选择预算”不应被选择 单击选项时允许“蓝框”移动(在仍在悬停时不会移动) 当悬停离开蓝色的盒子,然后回到它上面时,下面的悬停方式会闪过。 我非常感谢在这方面提供任何协助。我觉得这是非常接近,但我知道必须有一个更精简的方法,我希望这是尽可能简单的。谢谢!
浏览 3
提问于2012-08-16
得票数 0
回答已采纳
5
回答
如何在加载网页时添加过渡
html
、
css
是否可以像加载网页时那样添加过渡效果,就像你悬停带有过渡效果的div时一样。
浏览 3
提问于2013-04-30
得票数 0
回答已采纳
2
回答
创建父div webkit-筛选器不影响子项
html
、
css
、
slurp
我使用了一个非常花哨的webkit滤镜来使背景图像灰度化,当鼠标悬停在图像上时就变成了彩色。 这是过滤器 filter: none; -webkit-filter: grayscale(0); transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; 正如你所看到的,甚至有一个“过渡”属性,使图像有一个平滑的淡入全色过渡。我遇到的问题是,我要应用它的div也会影响位于div中的子文本,也会将文本转换为灰度。
浏览 1
提问于2014-03-23
得票数 21
回答已采纳
1
回答
Css转换-从底部填充文本
css
、
colors
、
transitions
我有黑色的文字,我想使黄色悬停。 然而,我想要过渡,使文本填充颜色从底部到顶部的文本。 是否可以使用纯css?
浏览 1
提问于2017-03-08
得票数 1
回答已采纳
1
回答
如何在鼠标悬停时立即停止jcarousel并在鼠标输出时继续
jquery
、
css
、
jcarousel
我试图用一个动作(在本例中是悬停)来停止一个转换,但我不知道如何实现它。这就是我要测试的地方: 我有3个jcarousel实例,我的目标是在鼠标悬停时(立即)停止移动。问题是:当鼠标在旋转木马上时,我停止了它,但当前的过渡在停止之前就结束了,感觉不是期望的,我希望在鼠标悬停时立即停止移动。 这是第一个轮播的初始化: $('#jcarousel1') .jcarousel({ 'animation': { 'duration': 6000, //DEFINE SPEED 'easing'
浏览 6
提问于2014-02-09
得票数 4
1
回答
悬停时的React-jss转换
javascript
、
css
、
reactjs
、
jss
我正在尝试添加一个过渡到一些JSS样式。当我在root类上有一个悬停事件时,我有一个针对(icon的)兄弟类的悬停效果来调整SVG的填充颜色。悬停效果可以正常工作,但我无法为fill颜色中的元素添加过渡。我在任何地方都找不到关于兄弟类或子类上转换的正确语法的文档。 以下是我的方法: root: { position: "relative", textAlign: "center", fontSize: "13px", color: theme.palette.grey[400], padding: "
浏览 14
提问于2019-08-07
得票数 0
6
回答
悬停时的CSS过渡
html
、
css
我有个问题。当我将鼠标悬停在对象上时,我实际上会尝试在div处进行过渡。所以基本上我有一个div,当我将鼠标悬停在div上时,它应该在它的顶部显示另一个div,但是它应该是过渡的,所以悬停效果会更平滑。 如果我有这两个div,怎么可能呢? <div id="first"> <div id="on-hover"> <img src="example-image.png" /> </div> </div>
浏览 5
提问于2013-04-01
得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
出色的CSS图像悬停效果汇总
CSS3百行之内轻松完成金属光泽3D按钮特效
这些组件设计细节,真的不能忽视:5种属性+3种类型
Markdown 教程-图片的替代文本
CSS3悬停文字幻灯片效果
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券