CSS Hover Controls On the iPhone

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links—a way to simplify your interface.

The iPhone has a touch screen, so you can’t really hover over anything, but the following technique will still work. Instead of hovering, you’ll have to click on a given area for the controls to show up. This area will have to be a link, either an inline link or a block link (block will work better because you can make the click area larger).

Obviously this technique isn’t exactly great because the user won’t be able to discover the hidden controls very easily, but if for some reason you have to have this implemented, here’s how.

First, create your controls. Here’s the markup I’ve used:

<ul id="controls"> 
    <li> 
        <div class="hover_controls">
            <a href="#edit">Edit</a> | 
            <a href="#delete">Delete</a>
        </div> 
        <a href="#link" class="link">Lorem ipsum dolor...</a> 
    </li> 
</ul> 

Above you can see a list of links—in that case just one link, but the rest of the links in this list would be structured the same. You’ve got your list item, inside of which are two things: a hover controls div with a couple of links inside (edit and delete) and another link sitting outside it. I’ve given that other link it’s own class so I can style it directly.

Here’s the CSS we’d use to get the hover controls show up on the right when you hover your mouse over them:

#controls li {
    display: block;
}
#controls li .link {
    display: block;
    padding: 10px;
    border-bottom: solid 1px #CCC;
}
#controls li .hover_controls {
    float: right;
    display: none;
}
#controls li:hover .hover_controls {
    display: block;
}

The hover bit is at the bottom on the last two selectors. You style the hover controls with “display: none” and then you use “display: block” to show them when you hover over a list item.

The iPhone magic happens with the other link which I gave the “.link” class. Without anything to click on, you won’t be able to get the hover controls to show up, but if you put a link inside the list item next to the hover controls div, you’ll be able to click on that link to get the controls to show up. I’ve styled the link to be a block element and gave it some padding, making the click area much larger (this isn’t required).

It works like this: tapping anywhere on the area with the link on your iPhone will reveal the hover controls for that particular link, but you will not actually activate anything yet with the first tap. The hover controls will stay there waiting for your input. You can then tap on any of the new links to activate them, or even on the original “.link” link. This implementation basically gives you “hover” controls accessible with two taps on your iPhone.

Here’s a live demo you can view on your iPhone. View the source there to see the full implementation.

author picture Written by Dmitry Fadeyev
Published on May 12, 2010