Hover-effect on six boxes

Submitted by iceman-pw on Tue, 10/13/2009 - 09:52

Hello everybody.

I have the following situation:

****************************************
****************HEAD*****************
****************************************

******************** *******************
*******BOX1****** *******BOX4******
******************** *******************

******************** *******************
*******BOX2****** *******BOX5******
******************** *******************

******************** *******************
*******BOX3****** *******BOX6******
******************** *******************

****************************************
****************FOOT*****************
****************************************

At start all six boxes are grey. On mousehover they should be red, blue, yellow, green, orange and light grey.

Is it possible to realize that and if yes, how?

CSS I've realized, the JS is my problem...
(f.e.: $(".boxred:hover").liquidCanvas("[shadow fillred] => roundedRect{radius:20}");)

greets iceman-pw

Trackback URL for this post:

http://www.ruzee.com/trackback/261
‹ Image plugin with x/y postion option Specify border sides ›

sample hover effect

Submitted by ankoerner1 (not verified) on Thu, 10/29/2009 - 20:34.

$(".boxred").liquidCanvas("[shadow fill{color:rgba(127,127,127,1)}] => roundedRect{radius:20}");

$(".boxred").hover(function()
{ $(this).liquidCanvas("[shadow fill{color:rgba(255,0,0,1)}] => roundedRect{radius:20}"); },
function() {
$(this).liquidCanvas("[shadow fill{color:rgba(127,127,127,1)}] => roundedRect{radius:20}");
});

removing an effect completly

Submitted by stevegmag (not verified) on Sat, 05/22/2010 - 23:53.

Some more documentation would be very helpful.

Using your example, how do I get the hover state to return to the original state?

$(".boxred").hover(function()
{ $(this).liquidCanvas("[shadow fill{color:rgba(255,0,0,1)}] => roundedRect{radius:20}"); },
function() {
$(this).liquidCanvas(); // [null] - [] - .remove() ?????
});

Seems redundant to have to add the original state to the hover.