mikevp Posted January 23, 2015 Share Posted January 23, 2015 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.) Link to comment Share on other sites More sharing options...
Ingolme Posted January 23, 2015 Share Posted January 23, 2015 It's not possible in CSS. When you select span.paren:hover, you're selecting all spans with class "paren" There's no selector that can select an element based on what other elements it contains, which is what would be necessary to make this possible in CSS. Link to comment Share on other sites More sharing options...
mikevp Posted January 23, 2015 Author Share Posted January 23, 2015 Thanks... I was afraid that was the answer. Link to comment Share on other sites More sharing options...
tejasamrute Posted January 24, 2015 Share Posted January 24, 2015 span.paren span:hover { background: lightgray; } with this code...it will only highlight (and inner part) is this what are you looking for???? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now