HTML and CSS Reference
In-Depth Information
You're also not limited to effects on
hover
; any other dynamic pseudo-
class will work just as well. With a slight modification, the
:target
example from chapter 7 can be made to fade smoothly in and out.
1. The page loads blank.
2. When you click the
first link, the content
starts to fade in.
3. After 10 seconds, the
transition completes.
4. Clicking the second
link starts two transi-
tions. The current text
starts to fade out…
5. …as the new page
starts to fade in.
6. After 10 seconds, the
new content has
replaced the old.
The
HTML
is similar to that in chapter 7. All that's been added is a
<section>
element to allow the paragraphs to be absolutely positioned:
<menu>
<a href="#one">Show one</a>
<a href="#two">Show two</a>
<a href="#three">Show three</a>
<a href="#four">Show four</a>
</menu>
<section>
<p id="one">I never am really satisfied...</p>
<p id="two">In almost every computation...</p>
<p id="three">Many persons who are not conversant...</p>
<p id="four">The Analytical Engine has no pretensions...</p>
</section>
