htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

マウスオーバーで表示が変わるやつをCSSで実現

HTML CSS

たぶんとっくにやってる人は掃いて捨てるほどいそうだけど、何となく書いた。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title>CSSでマウスオーバーメニューっぽいの</title>
  <style type="text/css">
  div {
    position: absolute;
    top: 40px;
    left: 40px;
    font-family: monospace;
    padding: 8px;
    border: 2px solid;
    background-color: #fff;
  }
  #under {
    border-color: blue;
    z-index: 1;
  }
  #under:hover {
    z-index: 3;
  }
  #over {
    border-color: red;
    z-index: 2;
  }
  #over:hover {
    z-index: 0;
  }
  </style>
</head>
<body>
  <div id="under">下だよ</div>
  <div id="over">上だよ</div>
</body>
</html>

まず二つの要素を重ねます。
そんで、マウスオーバーで上を覆っている要素に :hover疑似クラスが適用されると、そのz-indexが低くなり隠れます。
その直後に、下に隠れていた要素にマウスカーソルが当たり :hover疑似クラスが適用されて上に引っ張り出されるって寸法です。

上の要素を display: none; で消すって手法だと消えては出て消えては出ての繰り返しでチラついちゃうのでこういう方法で。

JavaScriptの onmouseover, onmouseout だとスクリプト有効じゃないと実行されない欠点があるので。
まぁ今日日JavaScript無効にしてる人のほうが少ないと思うけど。

今回はリソースがないため文章でやりましたが、もちろん画像でも同じことができます。