How to change link color when hovering or clicking lavalamp jquery menu?
-
22-12-2020 - |
문제
I am using LavaLamp script for my horizontal menu
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Active or hovered link is now grey. I want to change color on hover (or clicked) menu item, to look like this:
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);
해결책
Add the following to your css CSS:
.lavaLamp li a:hover {
color: white;
background: lightblue;
//anything else you want to add here
}
in addition if you want it also to change upon select you should create a class that is added to the link's li
element when it is selected and removed when another is selected. for example the abc
class would be added to the selected link li
element:
.abc a {
color: white;
background: lightblue;
//anything else you want to add here
}
다른 팁
I think the only thing you need to do is change the 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;
}
제휴하지 않습니다 StackOverflow