css // code // html5

CSS Hover Trick

In no way am I claiming this to be original.  But I can’t say I have seen this trick done anywhere else.  With the CSS :hover selector, you can create a nice “status message” appear in one location while hovering over particular items in a list (or menu).  Below are the screen captures of what the trick accomplishes, followed by the entire source code to make it possible.  Enjoy!

No mouse hover


Mouse hover over first item


Mouse hover over second item


Mouse hover over third item


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>CSS Hover</title>
        #csshover ul { 
            position:           relative;
            margin:             0;
            padding:            0; 
        #csshover li {
            list-style-type:    none;
            display:            inline-block;
            margin-right:       3em;  
            cursor:             pointer;   
        #csshover li p {
            position:           absolute;
            top:                2em;   
            display:            none;
            left:               0em;
        #csshover li:hover p {
            display:            inherit;
    <article id="csshover">
        <h1>CSS Hover Trick</h1>
        <p>Hover over each of the words below.  Look for status message below!</p>
            <li><div>CSS  </div><p>It's all about the style!</p></li>
            <li><div>Hover</div><p>When you wander above...</p></li>
            <li><div>Trick</div><p>Look Ma, no JavaScript!</p></li>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
blog comments powered by Disqus