Any way to achieve this using only stylesheets (no Javascript)?

[danebarney@gmail.com]

I have a line of text for which I want each word to become highlighted
(change background color) when the mouse cursor hovers over it, but
with one catch: when hovering over a word, it should highlight not only
itself but also every word following it until the end of the sentence.
So far, I have only been able to do this through Javascript onMouseOver
and onMouseOut events, identifying each word by an 'id' attribute and
changing its background color accordingly. All this makes the HTML
quite lengthy, and I was wondering if there would be a cleaner way to
do this using only CSS?
Thanks

[Andy Dingley]

Re: Any way to achieve this using only stylesheets (no Javascript)?


danebarney@gmai l.com wrote:

So far, I have only been able to do this through Javascript onMouseOver
and onMouseOut events,

Sounds reasonable to me. I don't think CSS would ever be able to do
this and JS is a perfectly reasonable solution.

identifying each word by an 'id' attribute

Sounds like you need some smarter JS. Don't pass an element's id into
your event handler, use the JS event object that already exists and
represents the source of the event. From this you should be able to
access the DOM and traverse it as needed, without needing to set
explicit ids in the HTML.