CODEWITHSUNDEEP
jquery
Andy Baker
Andy Baker

Reputation: 21587

Jquery color change

I have an element that can have an arbitrary background colour (set via a CMS).

I want to highlight it by brightening it on mouse over and darkening it on mouse out.

I tried using .css('background-color') to get and set the value but it seemed to be a lot more fiddly than I expected.

What's the non-dumb way to do this?

Edit: Just to clarify - the fiddly bit is parsing and doing arithmetic with colour values - not coping with the events.

Edit: The colour plugin gave me a way to read colour values but without colour arithmetic and writing support I still had to do some donkey work.

In the end I went with a fast 'fadeTo' but need to confirm that opacity animation works properly in IE6.

Upvotes: 1

Views: 8509

Answers (4)

mishac
mishac

Reputation: 3314

If you want smooth color changes on hover, you can try the jquery-glow plugin

Upvotes: 1

user6212
user6212

Reputation:

I don't know what you mean by "fiddly" but I just tested this and it seems to work on the latest jQuery

$(document).ready(function() {
    var originalbc = $("#ThingThatChangesColors").css("background-color");
    $("#ThingThatChangesColors").mouseenter(function() {
        $(this).css("background-color", "#FFF");
    });
    $("#ThingThatChangesColors").mouseleave(function() {
        $(this).css("background-color", originalbc);
    });
});

Upvotes: 0

chakrit
chakrit

Reputation: 61558

Have you checked out the jQuery Color plugin?

I think color operations do not exists in the core jQuery code but maybe recent versions of jQuery may have already included it.

You need it to make jQuery understand color operations properly.

Upvotes: 3

cdmckay
cdmckay

Reputation: 32290

Use the jQuery hover event.

var overColor  = "#ddd";
var outColor = "#ccc";

$('#target').hover(function()
{
  $(this).css("background-color", overColor);
},
function()
{
  $(this).css("background-color", outColor);
});

To deal with getting the existing colour and then changing it, you'll have to find a library that can understand modify HTML #XXXXXX-style colours. You'll also have to be careful of if someone set the background color to a name like "red".

Upvotes: 0

Related Questions