- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我使用了这个纯 CSS 制作的 LavaLamp 效果,我几乎对它很满意:
<ul>
<li><a href="#">✿</a></li><!--
--><li><a href="#">Lorem</a></li><!--
--><li><a href="#">Ipsum</a></li><!--
--><li><a href="#">Consectetur adipisicing</a></li><!--
--><li><a href="#">Sit amet</a></li>
</ul>
html{
font-family:sans-serif;
font-size:1.2em;
background:#eee;
}
ul{
position:relative;
width:27em;height:2em;
margin:100px auto;
padding:0;
white-space:nowrap;
}
ul li{
display:inline;
text-align:center;
}
ul li a{
position:relative;
top:0;left:0;right:25em;bottom:0;
display:inline-block;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:.4em .2em;
color:#09C;
text-decoration:none;
text-shadow:0 1px 0 white;
/*transition*/
-webkit-transition:width .3s,right .3s;
-moz-transition:width .3s,right .3s;
-o-transition:width .3s,right .3s;
transition:width .3s,right .3s;
}
ul li:nth-child(1) a{
width:2em;
}
ul li:nth-child(2) a{
width:4em;
}
ul li:nth-child(3) a{
width:4em;
}
ul li:nth-child(4) a{
width:12em;
}
ul li:nth-child(5) a{
width:5em;
}
ul li:last-child a::after{
content:"";
position:absolute;
right:inherit;
bottom:-3px;
width:inherit;
height:3px;
background:#ccc;
pointer-events:none;
/*transition*/
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
ul li:nth-child(1) ~ li:last-child a{
right:25em;
width:2em;
}
ul li:nth-child(2):hover ~ li:last-child a{
right:21em;
width:4em;
}
ul li:nth-child(3):hover ~ li:last-child a{
right:17em;
width:4em;
}
ul li:nth-child(4):hover ~ li:last-child a{
right:5em;
width:12em;
}
ul li:nth-child(5):last-child:hover a{
right:0;
width:5em;
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after{
background:#c351fa;
}
ul li:last-child a{
min-width:5em;max-width:5em;
}
ul li a:hover,ul li a:focus{
color:#c351fa;
background-color:rgba(255,255,255,.6);
/*transition*/
-webkit-transition:width .3s,right .3s,background-color .3s;
-moz-transition:width .3s,right .3s,background-color .3s;
-o-transition:width .3s,right .3s,background-color .3s;
transition:width .3s,right .3s,background-color .3s;
}
ul li a:focus{
border-bottom:3px solid #c351fa;
}
Click to see the example above on JSFiddle.net
不幸的是,当其他菜单项被点击时,LavaLamp 会跳回原始菜单项,因此被设置为.active-state。如何保持当前事件菜单项的效果(根据当前 .active-child)?
非常感谢您的帮助! :-)
最佳答案
此处适用的解决方案是为每个链接添加单选按钮。然后,通过 ~ 选择器和 input:checked 属性,您可以操纵链接以保持某种“状态”。您必须包括单选按钮,使其与 li 的大小相同,然后将不透明度设置为 0。这样,您可以在选择链接时调整下划线的位置,因为复选框保持选中状态,即使用户停止将鼠标悬停在链接上。请务必为所有复选框赋予相同的名称属性,这样如果选择了另一个链接,则前一个复选框将被取消选中!如果您还有其他问题,我可以查看是否可以编辑您的 fiddle ,但是您的代码非常广泛!但是你的作品非常令人印象深刻,看起来非常酷!
关于html - 纯 CSS 制作的 LavaLamp 效果 : How to hold the LavaLamp on active menuitem?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30879370/
嗨,我希望有人可以帮助我解决 jQuery lavalamp 问题。 我有以下内容- 使用 lavalamp 的菜单栏。- 单击菜单栏上的链接时加载内容的 div- 在我的内容 div 中,我有一些链
我使用了这个纯 CSS 制作的 LavaLamp 效果,我几乎对它很满意: HTML: ✿LoremIpsumConsectetur adipisicingSit amet CSS: ht
这个问题在这里已经有了答案: 关闭 13 年前。 Possible Duplicate: Trouble with jquery lavalamp 出于某种原因,无论我点击哪个链接,我的背景颜色都会
我正在尝试使用 jquery 的 lavalamp 插件并为其添加下拉功能。 下拉菜单和 lavalamp 效果在此代码上都可以正常工作,除了我的问题是下拉菜单扩展了 lavalamp 效果。 我确定
我正在为我的博客制作一个 tumblr 主题。我想在我的菜单中实现 lavalamp,但我尝试了很多不同的东西,但似乎无法让它工作。我不是 jquery 专家,所以非常感谢您的帮助!!! 我的博客是h
我相信你们中的许多人都知道 jQuery LavaLamp:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 我知
我有一个导航菜单,我想为其使用 lava lamp jQuery 插件。在这个 fiddle 示例中,熔岩灯插件完美运行: http://jsfiddle.net/tsLPT/3/ 但在我的菜单上:
我正在寻找 Lavalamp 菜单解决方案,并找到了这个小脚本。我不确定这是否是最好的,但看起来不错并且可以轻松修改。 但是它在控制台中包含一个错误,我不喜欢错误,因此我们将不胜感激。 Uncaugh
我遇到了一个问题,真的希望你们能帮忙。 http://ontwikkelomgeving.wijzijnblits.nl/primawonen/在这里您可以找到我当前正在创建的网站。 如您所见,自动滚
我在将图像居中时遇到问题。地址是 http://burger-laden.de/preview/ 如您所见,箭头移动的地方有一个菜单。我的问题是现在我需要箭头始终位于文本的中心。这里的代码: 样式:
我正在使用带有 lavalamp 功能 (spasticNav) 的全屏滑动网站(fss slider)作为导航栏。在每张幻灯片中,我都放置了相同的菜单,该菜单项的类别为“当前”。但是,lavalam
我一直在尝试从 Hitmo 网站重新创建“预算” slider : http://hitmo-studio.com/contact.html#budget-panel-container 但我无法让它
出于某种原因,无论我点击哪个链接,我的背景颜色都会回到最左边的链接。任何人都知道如何让它留在点击的链接上? CSS #lamp { float:left; margin:25px 0px 0px 90
我正在试用 jQuery Lavalamp menu我正在尝试改变它并同时了解它是如何工作的。事实是,我发现的所有示例基本上都由两张图片组成。 背景和左图。没问题,但我想创建一个包含三个图像的菜单。背
我正在开发一个 jQuery 函数来在我的导航栏上创建“lavalamp”效果。 目前,它以鼠标方式运行,除非您将鼠标悬停在某个元素(例如社区服务)上,然后将鼠标从导航栏移开。执行此操作时,#movi
我正在为水平菜单使用 LavaLamp 脚本 http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 事件或悬停的链接现
我在使用 jQuery 插件时遇到问题 LavaLamp ; 我关注了this教程,但没有任何效果。 有没有人用过这个插件可以告诉我我做错了什么this网站? 绿色菜单项应跟随鼠标指针。作为测试,我只
我已经为 LavaLamp 滑动菜单集成了代码,到目前为止效果很好(我遇到了一些问题,但能够通过阅读面板快速解决它们)但是有一件令人沮丧的事情妨碍了我。当您最初加载页面时,菜单悬停背景位于错误的位置,
亲爱的..我有一个问题。在 Firebug 展上: $("#menu ul.menu").lavaLamp 不是 menu.js 中的函数 悬停在菜单上不显示。我把这个问题显示出来:
Home About
我是一名优秀的程序员,十分优秀!