如何改变链接的颜色时,悬停或点击lavalamp jquery菜单
How to change link color when hovering or clicking lavalamp jquery menu?
我正在使用LavaLamp脚本为我的水平菜单
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/活动或悬停链接现在是灰色的。我想改变悬停(或点击)菜单项的颜色,看起来像这样:
http://screencast.com/t/WU02S3jF HTML: `<ul class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>`
Javascript: (function ($) { $.fn.lavaLamp = function (o) {
o = $.extend({ fx: "linear", speed: 500, click: function () { } }, o || {});
return this.each(function () {
var me = $(this), noop = function () { },
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this),
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function () {
move(this);
}, noop);
$(this).hover(noop, function () {
move(curr);
});
$li.click(function (e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({"left":el.offsetLeft+"px","width":el.offsetWidth+"px"});
curr = el;
};
function move(el) {
$back.each(function () {
$(this).dequeue();
}
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};})(jQuery);
添加以下css:
.lavaLamp li a:hover {
color: white;
background: lightblue;
//anything else you want to add here
}
此外,如果您希望在选择时也改变它,您应该创建一个类,当它被选中时添加到链接的li
元素,并在另一个被选中时删除它。例如,abc
类将被添加到所选的链接li
元素:
.abc a {
color: white;
background: lightblue;
//anything else you want to add here
}
我认为你唯一需要做的就是改变css background-color:
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: blue; // change this line to the correct color
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
相关文章:
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 导航菜单-悬停时的背景行为怪异
- 展开移动设备上的折叠菜单,同时在桌面上保持悬停
- 如何在悬停和聚焦时打开引导导航菜单
- Javascript-悬停时的Bootstrap下拉菜单打开子菜单的所有菜单级别
- 使用Jquery创建一个具有单击和悬停功能的菜单
- 悬停时展开垂直下拉菜单,而不是单击
- 使悬停菜单适用于移动设备的最佳实践方法是什么?
- 悬停菜单操作异常
- 悬停菜单关闭孩子时,当我尝试将鼠标移动到它时.为什么?[JsFiddle]
- JQuery悬停菜单,如果浏览器禁用javascript,它的工作方式与常规菜单类似
- 定位CSS悬停菜单的正确方法是什么
- 悬停菜单jquery上下滑动过快
- html/javascript悬停菜单
- Buggy jquery悬停菜单
- jQuery下拉悬停菜单
- css上的子菜单悬停菜单问题
- JS悬停菜单出现在我的网站DIV后面
- 悬停菜单后引导转盘刹车
- Jquery悬停菜单不工作的触摸