Web制作ラボ

リンクホバーで透過させずにボタンや画像を光らせる方法

Web制作ラボ

CSSで指定した要素にマウスカーソルが乗った時に変化を加える事が出来るホバーアクション。

リンク用のボタンや画像はWebサイトの閲覧者に「ここはリンクだよ!」と知らせるための目印としてホバーアクションが使われることが多いですよね。

その中でも特に使われるのがopacityプロパティを用いた以下のホバーアクションでは無いでしょうか。

<a href="#">カーソルを乗せたら光るよ!</a>
a {
    display: inline-block;
    padding: 3px 10px;
    background-color: #23395B;
    color: #FFF;
    border-radius: 5px;
    text-decoration: none;
}

a:hover {
    opacity: 0.7; /*値は0〜1まで指定可能。0に近いほど透明度が高い。*/
}

「opacity」は要素を透過することが出来るプロパティですが、これをマウスホバー時「opacity: 0.7;」となるよう指定することで、カーソルが乗った際にボタンが光ったように見えています。

ただしこの手法は一つだけ弱点があります。

背景が明るめの色かつ無地の時でないと、上の2つのボタンのように背景の色や柄の影響を受けてしまい、かっこ悪くなってしまうのです。

ということで、カーソルホバー時に背景の影響を受けずにボタンや画像を光らせる事ができる方法を以下でご紹介します。

リンクホバーで透過させずにボタンや画像を光らせる方法

考え方としては、光らせたい要素自体を透過すると背景が見えてしまうので、カーソルホバーした際に白い半透明の要素を上に被せることで光ったように見せます。

上の説明だけだとピンと来ないかもしれませんが、以下で先程作成したボタンを修正してみますので、一緒にコードの内容を見てみましょう。

<a href="#">カーソルを乗せたら光るよ!</a>
a {
    display: inline-block;
    padding: 3px 10px;
    background-color: #23395B;
    color: #FFF;
    border-radius: 5px;
    text-decoration: none;
    position: relative; /* 追加 */
}

a::before { /* ボタンと同じサイズの白い半透明の疑似要素beforeを作成し、非表示にしておく */
    display: none;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    opacity: 0.5;
}

a:hover::before { /* マウスホバー時に先程作成したbeforeを表示させる */
    display: block;
}

先ほど作成したボタンと同様、マウスカーソルを乗せるとしっかりと光っていますね。

それでは背景を変えてみましょう。

先ほど作成したボタンとは異なり、マウスカーソルを乗せた時に背景が透けてしまうことなく、ボタン自体が光っているように見えますね!

もちろんリンクがテキストではなく、画像の場合にも対応可能です。

まとめ

今回ご紹介したマウスホバー時のみ疑似要素を表示させる手法を使えば、Javascriptを使わずにアコーディオンメニューが作れたりします。

色々と応用が効くテクニックですので、是非いろいろ試してみて下さいね!

それでは今回はここまで!

トップページへ戻る