Effect.Highlight and :hover stops working?

[Darkv]

Hi list,

I stumbled on a problem I could not resolve so perhaps someone can
give some hints.

On my page I have a table:

<table border="0" cellspacing="0" cellpadding="0">
<tr class="even">
<td>abc</td>
<td>abc</td>
</tr>
<tr class="odd" id="itemHighlight">
<td>abc</td>
<td>abc</td>
</tr>
</table>

and the CSS styles:

tr.even {
background: #F1F5F9;
}
tr.odd {
background: #FFF;
}
tr.even:hover, tr.odd:hover {
background: #DADFE4;
}

This highlights the row the cursor currently hovers about and works
flawlessly. In a next step I want a specific row to use the
scriptaculous effect Highlight after the page has loaded. For that
purpose the second row in the example has an id assigned. At the end
of the HTML I included a javascript snippet:

<script type="text/javascript">
new Effect.Highlight('itemHighlight');
</script>

When the page loads the second row is correctly highlighted but then
that row does not respond to the CSS :hover style anymore. If I move
the id from the tr-tag to one of the children td-tags the td is
highlighted and the tr:hover style works, so I think I could set an id
for every children td-tag to make it work but this seems overly
complicated and hackish. Am I doing something wrong?

Thanks in advance!

[Justin Perkins]

That is happening because the background color of the row is set with
inline CSS to be the original background color when the highlight
effect is complete. Inline CSS always has priority over CSS in the
stylesheet. Maybe you can try using the !important declaration to
override it?

Note that the :hover pseudo class is not supported in IE6 on any
element except an anchor.

-justin

[Darkv]

Hi justin,

On 25 Sep., 23:09, "Justin Perkins" <justinperk...@gmail.com> wrote:
> That is happening because the background color of the row is set with
> inline CSS to be the original background color when the highlight
> effect is complete. Inline CSS always has priority over CSS in the
> stylesheet. Maybe you can try using the !important declaration to
> override it?

I had thought of that, unfortunately the !important declaration does
not have any effect.

I tried to "manually" remove the background style from the element by
changing the script to

<script type="text/javascript">
new Effect.Highlight('itemHighlight');

$('itemHighlight').setStyle({background-color:;});
</script>

but then the highlight effect is suppressed. So my next thought was to
delay the clear of that style just as long so the effect has
terminated already with:

<script type="text/javascript">
new Effect.Highlight('itemHighlight');

setTimeout("$('itemHighlight').setStyle({background-color:;})",
3000);
</script>

But no luck either :-(

[Justin Perkins]

You want to use the afterFinish callback and set the background to
whatever color you need to. Setting the background color to an empty
string will have no effect (at least not when I tested it in Safari).
Also the way your setStyle() call is written, it will result in a
syntax error since the dash is an illegal character in that context as
well as the loose trailing semicolon.

Try something like this:

var element = $('itemHighlight'); // assuming element with ID of
itemHighlight is a TR with an odd or even class
element.highlight({ afterFinish:function(effectObject){
if (effectObject.element.hasClassName('odd'))
effectObject.element.setStyle('background-color:#fff;');
else effectObject.element.setStyle('background-color:#F1F5F9;');
}});

Also you can simplify your markup and CSS a tiny bit by not worrying
about assigning both an odd and even class to each row, just pick one
and go with that, for example only add the odd class to every other
row, then your CSS is:

tr{ background:#F1F5F9; }
tr.odd{ background:#fff; }

And since your hover color is the same for each row (regardless of if
it is odd or even), then you don't need the extra complicated selector
(class with hover pseudo class) and just go with:

tr:hover{ background:#DADFE4 }

Hope this helps.

-justin

[Johann Werner]

Thanks Justin!

With your help now it is working finally :-)
Though it does not respect the hover state when I set explicitly the
background color as in your code snippet. I had to set the background
style to empty string:

var element = $('<wo:str value="$id" />');
element.highlight({ afterFinish: function(effectObject) {
effectObject.element.style.background = "";
}});

This works in Safari and Firefox.