Effect.Highlight leaves backgroundColor set when it wasn't set to begin with

By default Effect.Highlight uses the background-color definition from the .style attribute, or if that is not set from the corresponding CSS rule (see Element.getStyle for this).

So, if you don't set the restorecolor option, all will be fine.

Check the code, but your assessment is incorrect: Here is the code:

if(!this.options.restorecolor)
      this.options.restorecolor = Element.getStyle(this.element, 'background-color');

Here are the possible outcomes from that line:

• (this.options.restorecolor == null) => this.options.restorecolor gets set to whaterver the backgroundColor of the Element is.
• (this.options.restorecolor == <somevalue>) => assignment line is skipped, but that is only because this.options.restorecolor *already* has a value in it, so that is no solution either.
• (this.options.restorecolor == ) => this.options.restorecolor gets set to whatever the backgroundColor of the Element is.
• (this.options.restorecolor == undefined) => this.options.restorecolor gets set to whatever the backgroundColor of the Element is.

So where is the option for me to *ensure* that this.options.restorecolor is set to or null so it *doesn't* set it later? Answer: nowhere - that is not a possible outcome from that line.

No matter how you slice it, that line is *going* to set "this.options.restorecolor" to a value *other* than "null" (unless your style.backgroundColor = null, then it might work - but that is silly and not functionalith)

Then later, when this code gets executed:

finish: function() {
    Element.setStyle(this.element, Object.extend(this.oldStyle, {
     backgroundColor: this.options.restorecolor

You are *going* to get a value placed *in-line* on the object directly - overriding anything the CSS has set.

Trust me, I've tried it. Run it through the debugger and you will see that it *does* get changed. What this does, is prevent *any* code from setting the backgroundColor in a style and having that propigate to the HtlmElement that just got it's backgroundColor set *explicitly*.

With my code change, it works as you indicate; without it, it works as I have indicated above.

Perhaps you have a different set of code, or perhaps your code already looks like mine...all I know is the code I downloaded is broken in that area.

See also #3738. (duplicate)

In total agreement with Andrew on this, I've been bitten by the same bug and looking at the source in the trunk, it hasn't been fixed.

The css :hover function breaks, and if the css class is changed after a highlight, no change will be observed. The inline style overrides the css in both of these situations.

The hack to fix it:

this.oldStyle = { backgroundImage: this.element.getStyle('background-image') };

becomes

this.oldStyle = { backgroundImage: (this.element.style.backgroundImage ? this.element.getStyle('background-image') : null) };

and

if (!this.options.restorecolor) {
  this.options.restorecolor = this.element.getStyle('background-color');
}

becomes

if (!this.options.restorecolor) {
  this.options.restorecolor = (this.element.style.backgroundColor ? this.element.getStyle('background-color') : null);
}

#6134