tips_popup | ナノ

Tips：CSSのみでポップアップリンクを作る

通常はJavaScriptが使われますが、CSSだけでも一応できます。
この方法ではIE6では動かないので、確実性はJavaScriptに劣ると思いますが、JavaScriptを無効にしていても動くという利点もあります。
動作環境→WinIE7以降（要文書宣言）,Firefox,Opera（おそらくSafariとChromeも動くと思います）

サンプルはこちら

解説…
擬似クラス:hoverをdivに指定することで、JavaScriptのonMouseOverと同じような動きをさせています。
IE6はa要素以外への:hoverをサポートしていないっぽいです。

ソースはこちら。ここではリストを使っています。

HTML

<div class="popup"><div><span>on mouse</span>
<ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>
</div></div>
<div style="clear:both;"></div>

CSS

.popup div {
    float:left;
    background:#bbcc99;
}

.popup span {
    display:block;
    padding:4px;
    width:10em;
    border-bottom:1px solid #ffffff;
    cursor:pointer;
}

.popup ul {
    display:none;
    margin:0px;
    padding:0px;
    list-style-type:none;
}

.popup div:hover ul {
    display:block;
    position:absolute;
}

.popup li a {
    display:block;
    padding:4px;
    width:10em;
    background:#bbcc99;
    border-bottom:1px solid #ffffff;
    color:#ffffff;
}

.popup li a:hover {
    background:#ccddaa;
    color:#667733;
}

装飾も含めてこんなカンジです。赤字のところは絶対必要な部分。
.popupにfloat:leftを指定しているので、clear:bothの前にもう一組入れれば隣に並びます。

もっとスマートな方法、あるかも？

* IE6でもdiv要素に:hoverを適用させるには、「csshover.htc」というファイルを使えば良いそうです。でもこれはJSライブラリのようなので、CSSのみでという主旨からはちょっと外れてしまうんですけれど。

[3/17 追記]
「on mouse」のところをリンクにできるようにちょこっとだけ修正しました。

HONEY CANDY

Tips：CSSのみでポップアップリンクを作る