Annotations should appear when hovering the text line, but not other parts of #source.p

4 files changed, 30 insertions, 21 deletions

diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index 0bf2986f..a5916681 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -50,9 +50,9 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 .stats span.par { background: #ffffd5; }
 .stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }
 
-#source p.par .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
+#source p .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
 
-#source p.par .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
+#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
 
 #keyboard_icon { float: right; margin: 5px; cursor: pointer; }
 
@@ -75,6 +75,7 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.highlight .n { background: #ffdd00; }
 #source p .t { display: inline-block; width: 100%; box-sizing: border-box; margin-left: -.5em; padding-left: 0.3em; border-left: 0.2em solid white; }
 #source p .t:hover { background: #f2f2f2; }
+#source p .t:hover ~ .r .annotate.long { display: block; }
 #source p .t .com { color: green; font-style: italic; line-height: 1px; }
 #source p .t .key { font-weight: bold; line-height: 1px; }
 #source p .t .str { color: #000080; }
@@ -90,10 +91,10 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.par .t { border-left: 0.2em solid #eeee99; }
 #source p.par.show_par .t { background: #ffffaa; }
 #source p.par.show_par .t:hover { background: #f2f2a2; }
-#source p.par .annotate.long { width: 30em; right: 2.5em; }
-#source p.par:hover .annotate.long { display: block; }
 #source p .r { position: absolute; top: 0; right: 2.5em; font-family: verdana, sans-serif; }
 #source p .annotate { font-family: georgia; color: #666; padding-right: .5em; }
+#source p .annotate.short:hover ~ .long { display: block; }
+#source p .annotate.long { width: 30em; right: 2.5em; }
 #source p input { display: none; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index c0d88ebb..619c428c 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -297,7 +297,12 @@ $context-panel-color: #aaeeff;
 
             &:hover {
                 background: $pln-hover-color;
+
+                & ~ .r .annotate.long {
+                    display: block;
+                }
             }
+
             // Syntax coloring
             .com {
                 color: green;
@@ -368,15 +373,6 @@ $context-panel-color: #aaeeff;
                 }
             }
 
-            .annotate.long {
-                @extend %in-text-popup;
-                width: 30em;
-                right: 2.5em;
-            }
-
-            &:hover .annotate.long {
-                display: block;
-            }
         }
 
         .r {
@@ -390,6 +386,16 @@ $context-panel-color: #aaeeff;
             font-family: georgia;
             color: #666;
             padding-right: .5em;
+
+            &.short:hover ~ .long {
+                display: block;
+            }
+
+            &.long {
+                @extend %in-text-popup;
+                width: 30em;
+                right: 2.5em;
+            }
         }
 
         input {
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index 0bf2986f..a5916681 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -50,9 +50,9 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 .stats span.par { background: #ffffd5; }
 .stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }
 
-#source p.par .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
+#source p .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
 
-#source p.par .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
+#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
 
 #keyboard_icon { float: right; margin: 5px; cursor: pointer; }
 
@@ -75,6 +75,7 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.highlight .n { background: #ffdd00; }
 #source p .t { display: inline-block; width: 100%; box-sizing: border-box; margin-left: -.5em; padding-left: 0.3em; border-left: 0.2em solid white; }
 #source p .t:hover { background: #f2f2f2; }
+#source p .t:hover ~ .r .annotate.long { display: block; }
 #source p .t .com { color: green; font-style: italic; line-height: 1px; }
 #source p .t .key { font-weight: bold; line-height: 1px; }
 #source p .t .str { color: #000080; }
@@ -90,10 +91,10 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.par .t { border-left: 0.2em solid #eeee99; }
 #source p.par.show_par .t { background: #ffffaa; }
 #source p.par.show_par .t:hover { background: #f2f2a2; }
-#source p.par .annotate.long { width: 30em; right: 2.5em; }
-#source p.par:hover .annotate.long { display: block; }
 #source p .r { position: absolute; top: 0; right: 2.5em; font-family: verdana, sans-serif; }
 #source p .annotate { font-family: georgia; color: #666; padding-right: .5em; }
+#source p .annotate.short:hover ~ .long { display: block; }
+#source p .annotate.long { width: 30em; right: 2.5em; }
 #source p input { display: none; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }
diff --git a/tests/gold/html/support/style.css b/tests/gold/html/support/style.css
index 0bf2986f..a5916681 100644
--- a/tests/gold/html/support/style.css
+++ b/tests/gold/html/support/style.css
@@ -50,9 +50,9 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 .stats span.par { background: #ffffd5; }
 .stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }
 
-#source p.par .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
+#source p .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
 
-#source p.par .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
+#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }
 
 #keyboard_icon { float: right; margin: 5px; cursor: pointer; }
 
@@ -75,6 +75,7 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.highlight .n { background: #ffdd00; }
 #source p .t { display: inline-block; width: 100%; box-sizing: border-box; margin-left: -.5em; padding-left: 0.3em; border-left: 0.2em solid white; }
 #source p .t:hover { background: #f2f2f2; }
+#source p .t:hover ~ .r .annotate.long { display: block; }
 #source p .t .com { color: green; font-style: italic; line-height: 1px; }
 #source p .t .key { font-weight: bold; line-height: 1px; }
 #source p .t .str { color: #000080; }
@@ -90,10 +91,10 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p.par .t { border-left: 0.2em solid #eeee99; }
 #source p.par.show_par .t { background: #ffffaa; }
 #source p.par.show_par .t:hover { background: #f2f2a2; }
-#source p.par .annotate.long { width: 30em; right: 2.5em; }
-#source p.par:hover .annotate.long { display: block; }
 #source p .r { position: absolute; top: 0; right: 2.5em; font-family: verdana, sans-serif; }
 #source p .annotate { font-family: georgia; color: #666; padding-right: .5em; }
+#source p .annotate.short:hover ~ .long { display: block; }
+#source p .annotate.long { width: 30em; right: 2.5em; }
 #source p input { display: none; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }