mikevp

Thanks... I was afraid that was the answer.

I'm trying to write a page to display an expression with nested parentheses, and highlight each parenthesized part on hover.For instance:Expression (with parens ( and inner part) and more outerWhen the cursor is inside the inner parentheses, I want to highlight just the inner part.The following code works only for the outermost parentheses. When I'm hovering over the inner part, it highlights the entire span. <style> span.paren:hover {background: lightgray;}</style>Expression<span class="paren"> (with parens <span class="paren"> ( and inner part) </span> and more outer)</span> Is there a way to have the hover apply to only the innermost span the cursor is hovering over? Yeah, I could have classes p1 - pn for each nesting level with a different background color for each (since all spans matching the current cursor position trigger their hover) but I'm resorting to this because of some expressions with a whole lot of nesting levels, and the rainbow effect would obscure what I'm trying to make clear. Just a simple highlight of the single most local to the cursor parenthesized part is what I really want. (I'm trying to avoid resorting to javascript.)