css - コンテンツを非表示にするが、:hover に応答する

Question

Windows 8 で見られるように、チャームを作成するための純粋な oocss アプローチに取り組んでいます。Dock クラスは完成しましたが、マウスがドッキングされた領域に移動したときにチャームを「拡張」する方法を理解するのに問題があります。コンテンツを非表示にする方法があることは知っていますが、ブラウザーをチャームの :hover イベントに応答させます。何かアイデアがありましたら、お知らせください。

ドック

コンテンツを画面の端にドッキングします。

.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
{
    padding:                        24px;
}

.charm:hover
{

}

HTML

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


</div>

パディングして幅を 1px に設定しようとしましたが、うまくいきませんでした。私の当初の計画では、移動が背景色の上を移動したときに背景色を適用していたので、画面の端に下る線はレンダリングされませんでした。

これは私が得たのと同じくらい近いですが、醜いです:

.charm__body
{
    width:                           0;

    visibility:                      collapse;
}

.charm:hover
{
    background:                     blue;
}

.charm:hover .charm__body
{
    width:                          auto;

    visibility:                     visible;
}