Alan Barrett wrote:
> On Tue, 09 Feb 2010, Julian Foad wrote:
> > * A very neat solution: a little "link to this section" symbol after
> > each heading. I saw a web site that provided links to the individual
> > section headings by popping up a little symbol (the paragraph marker
> > symbol which looks like a P with a double-stroked vertical line) just at
> > the end of the section heading text, only when the mouse hovered over
> > the heading text. The symbol was a link to the full URL of that section,
> > so it could be copied, plus a "title" attribute of some kind.
> Here's an attempt at an implementation.
>
> /* CSS */
>
> /*
> * Hide class="sectionlink", except when an enclosing heading
> * has the :hover property.
> */
> .sectionlink { display: none; }
> .heading:hover .sectionlink { display: inline; }
Thanks, Alan. For our purposes, where headings come in various classes:
[[[
Index: style/site.css
===================================================================
--- style/site.css (revision 904498)
+++ style/site.css (working copy)
@@ -135,6 +135,10 @@
.h3 {
margin-left: 2em;
}
+/* Hide class="sectionlink", except when an enclosing heading has the :hover
+ * property. */
+.sectionlink { display: none; }
+:hover > .sectionlink { display: inline; }
/*
** Other Customizations
]]]
That matches anything with class "sectionlink" that is a direct child of
what you're hovering over.
Then we can modify our headings like this:
[[[
-<div class="h2" id="news" title="news">
-<h2>News</h2>
+<div class="h2" id="news">
+<h2>News<a href="#news" class="sectionlink" title="Link to this
section">ΒΆ</a></h2>
]]]
How's that?
- Julian
