HTML and CSS Reference
In-Depth Information
background-color: #FFF;
border-radius: 15px;
#casino:hover p {
left: 140px;
The casino<div> is relatively positioned with no offsets, leaving the <div> in its normal position in the
document flow, while creating a containing block for the paragraph, which is absolutely positioned. The top
offset of the paragraph is set to 60px , which moves it down from the top of the image by the same amount.
However, the left offset is set to a very high negative value, which moves it offscreen, but leaves the content
accessible to screen readers for the blind. When the user hovers over the casino<div> , #casino:hover p resets
the paragraph's left offset to 140px
IE 6 and IE 7 support the :hover pseudo-class only on links. If you need to support IE 6 and IE 7, wrap the
image in a dummy link and add an empty title attribute to the <img> tag like this (the code is in tooltips_ie6-7.
<a href="#"> <img src="images/casino.jpg" alt="Casino at Monte Carlo" width="266"
height="400" class="shadow" title=""></a>
The empty title attribute is needed to prevent older versions of IE incorrectly displaying the alt text as an
unstyled tooltip. Also, you need to add the following styles to prevent a blue border surrounding the image, and
to stop the cursor from turning into a hand:
a img {
border: none;
#casino a:hover {
cursor: default;
Although screen readers should be able to access the tooltip paragraph, it's not accessible to anyone
using the keyboard to navigate around a site. Don't use this technique for essential information.
Adding a Styled Tooltip to a Link
The principle behind adding a styled tooltip to a link is exactly the same as for an image, but the text of the tooltip
needs to be nested inside the link. The second paragraph in tooltips.html contains a link with a nested
<span> like this:
<a href="">Formula 1 Grand Prix <span>Most F1 races are held on
specially constructed circuits. But Monaco is one of a handful of F1 street circuits that
also include Valencia, Melbourne, and Singapore.</span> </a>
The styles for the link and tooltip look like this:
a[href$=""] {
position: relative;
Search WWH ::

Custom Search