HTML and CSS Reference
In-Depth Information
The HTML in tooltips_touch.html has been modified to add the ID
tooltip1
to the paragraph nested in the
casino<div>
. Also, the
<span>
in the link has been given the ID
f1
. The following script has been added at the
bottom of the page:
<script>
var tip1=document.getElementById('tooltip1'),
f1=document.getElementById('f1');
tip1.addEventListener('touchstart', closeTooltip, false);
f1.addEventListener('touchstart', closeTooltip, false);
function closeTooltip(e) {
e.preventDefault();
e.stopPropagation();
var target=e.target.id;
target.style.left="-9999px";
}
</script>
The script binds a function called
closeTooltip
to the
touchstart
JavaScript event on both tooltips. The
function identifies which tooltip has been tapped, and sets its
left
offset to
-9999px
, effectively hiding it. This
neatly solves the problem on iOS. Unfortunately, it doesn't work on Android, even though Android supports the
touchstart
event.
Creating a CSS Drop-down Menu
Navigation menus are frequently created by styling unordered lists, and a submenu is another list nested inside a
list item. So, if the list item is relatively positioned, you can hide the submenu and display it when hovering over
its parent. Before showing you how to do it, I need to introduce a new selector.
Introducing the Child Selector
A
child selector
matches an element that is the child of another—in other words, it must be at the next level of the
HTML hierarchy, and no deeper. Take the following markup:
<blockquote>
<p>To be, or<em>not</em>to be. . . </p>
</blockquote>
In this example, the
<em
>
tag is a child of
<p>
, but not of
<blockquote>
. The
<em
>
tag is a descendant of
the
<blockquote>
, but not one of its children.
To create a child selector, add the greater than sign (
>
) between the parent and child selectors. For example,
the following child selector targets all paragraphs that are direct children of a
<blockquote
>
element and renders
them in italic font:
blockquote>p {
font-style: italic;
}
