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.)