Fun with the CSS :hover Selector

Friday, November 05, 2010

Before jumping into the topic at hand, since this is my first "FLOG" post, let me introduce myself. My name is Matt Bieda and I specialize in web design conversion among my other development tasks.

In fact I really like design conversion; while I'm not the world's best web designer I do like to implement web designs in CSS and XHTML. Yes, I'm the nutty guy that will count pixels to get the slices just right.

So that's a little about me, hence a post on something fun with CSS... So let's get started.

Shiny Objects

A lot of modern web designs these days use what I call "shiny objects"; that is things that do nifty stuff to attract "ooh's and ahh's" from users. Many shiny objects are done using proprietary objects in Adobe Flash, or increasingly Microsoft Silverlight but the vast majority are still JavaScript or AJAX. Many of the latter are a combination of not just JavaScript procedures but CSS selectors and StyleSheets.

In the past (a subjective term depending on your browser) the developer had to rely on a lot of JS to play with shiny objects, even simple ones like buttons that would change when you hovered over them. And still today they often do so to create things like fly-out or drop-down menus. Not only that but one often had to modify routines in JS to handle multiple browser interpretations of the JS language. Although toolkits like jQuery, Melonic, Moo Tools and the like tend to make it easier on the developer, it can still be cumbersome to do some things in the browser, cross-browser, using the mash-up paradigm of JS and CSS.

Certainly when necessary, I like anyone else, use these tools to my advantage. But I also like to see what I can get away with using just CSS when appropriate. Usually (and specifically to this discussion) appropriate means not supporting moldy old browsers like the demon that is IE6. This is because modern browsers, even the normally-off-the-reservation MSIE these days (meaning IE8), are all getting really good at supporting CSS standards.

The :hover Selector

One of the tools that is becoming more useful in CSS 2 is the :hover selector. Most of you have probably seen this used on classes for the <A> tag, primarily in the form of "a:hover" along with "a:link, a:visited, and a:active" which are all specific to the <A> tag itself. Here :hover is often used to make the links do something nifty like change color or add/remove the underline etc... However :hover can be much more powerful, especially when used on any class or id selector, not just ones for the <A> tag.

Sticking with the good old <A> tag, there are some cool things you can do with :hover besides changing font properties. If you "display:block;" your <A> tag and position it relative with a set width and height, you can easily display a background image on the tag of the same dimensions. Then, using :hover you can replace the background image with something else when the user hovers the link. This is a super fast way to do button-like links using nothing but clean <A> tag markup using only one CSS class and two lines of CSS in your StyleSheet. No JS required.

The previous implementation is natively cross browser, even in crochety Mr. IE6, however the next one isn't.

Overflowing with Goodness

In CSS 2, you can use :hover on any class. So something like "div.mybox:hover" is perfectly legal. It works the same way it does on the <A> tag, when you hover you can swap or override many things on the base class. However something really special happens when you use :hover in combination with some simple mark-up, positioning statements and the "overflow" CSS selector.

Normally overflow is used as "overflow:hidden; or overflow:scroll;" to control content that would otherwise expand beyond the limits of the container. However you can use overflow to hide something using "overflow:hidden;" and then on :hover show it using "overflow:visible;" on the hover state. Under the right circumstances this can be very powerful and save a lot of JS programming using simple clean CSS. The reason is you can use it to create simple pop-up or fly-out menus or windows.

Consider the following classes and markup:

.mybox {
    display: block;
    position: relative;
    width: 100px;
    height: 50px;
    background-color: #00F;
    overflow: hidden;
}

.mybox:hover {
    height: 200px;
    overflow: visible;
}

.mybox h1 {
    display: block;
    position: relative;
    width: 100px;
    height: 50px;
}

.mybox .popbox {
    display: block;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 150px;
    height: 150px;
    background-color: #000;
    color: #FFF;
}

~~~~

<div class="mybox">
    <h1>Hello World</h1>
    <div class="popbox">
         <ul>
            <li>What</li>
            <li>What What</li>
        </ul>
    </div>
</div>

In the above example the div "popbox" would not be visible normally because overflow is hidden and it is positioned 50px below "mybox" which is only 50px high. Now when you hover over the container "mybox" the overflow becomes visible and this would cause "popbox" to show along with the list it contains. As long as "mybox" has a z-index which is above its surroundings (or an object that contains multiple instances of "mybox" has a superior z-index) "popbox" will appear to pop-up on the page just like any JS version of same. Selectively using transparencies or alpha-blended PNG files you can do some nifty stuff with just CSS that those unaware would swear "had to be" done using JavaScript or even Flash.

Note that in the example I expanded the height of "mybox" to completely contain "popbox" this is not necessary. However it's good practice to do that because you can absolutely position the hidden item anywhere. Normally this might be a few pixels away from the container element to achieve a desired look, the only way for the user to be able to move their mouse from the hover area to the newly visible area is if there is an un-interrupted connection to it. If they're right next to eachother no expansion is needed. Also note that even if the hidden box is outside the specified bounds of the container element, thus far all modern browsers have interpreted this as being "over" the container element even if you aren't! This means your users can mouse over to the hover-visible item to read something, click something, scroll a panel, etc...

So some of you may have heard of the mythical CSS mega-menus or CSS flyout-navigation which use no JavaScript at all. The concept above is basically how those are done. It is important to note that they do not work in IE6 or older and do not work in mobile touch browsers like Safari in iPhone and iPad. However they are easy enough to disable using an override stylesheet that applies "display:none;" to the overflow:hidden; objects. In the cases where IE6 and mobile devices must be supported, creating alternate navigation which does not rely on the fly-out or drop-down menus can be extended to the mobile devices and versions of IE6 or older.

Real World Implementations

If you'd like to see actual implemented examples in "the wild" check out the following web sites:

http://www.asahq.org

http://www.orgsource.com

On both sites the mega-menus are pure CSS. On ASAHQ, internal pages have left-column navigation which has n-level nested flyout menus implemented in pure CSS. On .orgSource the home page has a visual feature with pop-ups that are implemented using pure CSS.

You can also look on our F648 site. The main navigation includes pure CSS drop menus for the Web Development, Managed Hosting, and Creative Services items.

So try it out for yourself and see what kind of cool pure CSS magic you can work out!