Hide content but respond to :hover

Question

I am working on a pure oocss approach to creating the charms as found in Windows 8. I have the Dock class finished, but am having problems with figuring out how to "expand" the charm when the mouse is moved over a docked area. I know there are ways to hide content but have the browser respond to the :hover event of Charm. If you have any ideas, let me know.

Dock

Docks content to the edge of the screen.

.dock 
{
    position:                       fixed;

    height:                         auto;

    width:                          auto;
}

.dock--top
{
    width:                          100%;

    top:                            0;
}

.dock--bottom
{
    width:                          100%;

    bottom:                         0;
}

.dock--left
{
    height:                         100%;

    width:                          auto;

    left:                           0;
}

.dock--right
{
    height:                         100%;

    right:                          0;
}

Charm

Island containing the content.

.charm
{
    padding:                        24px;
}

.charm:hover
{

}

Html

<div class="charm dock dock--right">


</div>

I tried padding it and setting the width to 1px but had no luck. On my original plan I would have applied the background-color when the move moved over it so it did not render a line going down the side of the screen.

This is as close as I have gotten but its ugly:

.charm__body
{
    width:                           0;

    visibility:                      collapse;
}

.charm:hover
{
    background:                     blue;
}

.charm:hover .charm__body
{
    width:                          auto;

    visibility:                     visible;
}

Answer 1

You can make a transparent div, positioned absolutely, and make it work as a hover trigger.