[CSS]ホバーの方向で変化するカラーが異なるスタイルシートのテクニック

ブラックに塗られたdiv要素を左からホバーするとオレンジに、右からホバーするとブルーに変更するスタイルシートのテクニックを紹介します。

ホバーの方向は、上下にも対応しています。

[ad#ad-2]

上からホバーするとレッド、下からホバーするとグリーンに変更します。

下記ページでオンラインデモとコードが掲載されています。

Multi-direction hover

[ad#ad-2]

仕組みは、下記のようになっています。

左からマウスホバーすると、右に移動し、オレンジになります。

HTML

最初に表示されているブラックのdiv要素と4つのdiv要素を配置します。

<div class="b-block">
    <div class="b-block__hoverer"></div>
    <div class="b-block__hoverer"></div>
    <div class="b-block__hoverer"></div>
    <div class="b-block__hoverer"></div>
    
    <div class="b-block__content">
        Hover me!
    </div>
</div>

CSS

CSS3のtransformを使用して、div要素を移動します。

/* The wrapper */
.b-block {
    position: relative;

    display: inline-block;
    overflow: hidden;
    width: 10em;
    height: 10em;

    vertical-align: middle;

    -webkit-transform: translateZ(0);
    }

/* The blocks that would be hovered */
.b-block__hoverer {
    position: absolute;
    z-index: 1;

    width: 71%;
    height: 71%;

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    }

/* Positioning for hoverers */
.b-block__hoverer:nth-child(1) {
    top: 0;
    right: 0;
    -webkit-transform-origin: 100% 0;
       -moz-transform-origin: 100% 0;
         -o-transform-origin: 100% 0;
            transform-origin: 100% 0;
    }
.b-block__hoverer:nth-child(2) {
    bottom: 0;
    right: 0;
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    }
.b-block__hoverer:nth-child(3) {
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
    }
.b-block__hoverer:nth-child(4) {
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    }

/* Enlarge the hoverer to cover the whole area */
.b-block__hoverer:hover {
    z-index: 9;

    width: 100%;
    height: 100%;

    -webkit-transform: none;
       -moz-transform: none;
         -o-transform: none;
            transform: none;
    }

/* Styles for content block */
.b-block__content {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    text-align: center;
    line-height: 10em;

    background: #333;
    color: #FFF;
    
    /* Restore the antialiasing lost from translateZ */
    -webkit-font-smoothing: subpixel-antialiased;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;

    -webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
       -moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
            box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
    }

/* Move the content block while hovering different blocks */
.b-block__hoverer:nth-child(1):hover ~ .b-block__content {
    -webkit-transform: translate(0, 100%);
       -moz-transform: translate(0, 100%);
         -o-transform: translate(0, 100%);
            transform: translate(0, 100%);
    }
.b-block__hoverer:nth-child(2):hover ~ .b-block__content {
    -webkit-transform: translate(-100%, 0);
       -moz-transform: translate(-100%, 0);
         -o-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
    }
.b-block__hoverer:nth-child(3):hover ~ .b-block__content {
    -webkit-transform: translate(0, -100%);
       -moz-transform: translate(0, -100%);
         -o-transform: translate(0, -100%);
            transform: translate(0, -100%);
    }
.b-block__hoverer:nth-child(4):hover ~ .b-block__content {
    -webkit-transform: translate(100%, 0);
       -moz-transform: translate(100%, 0);
         -o-transform: translate(100%, 0);
            transform: translate(100%, 0);
    }

/* Just for aestetics */
BODY {
    padding: 2em;
    font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    }