テクニカルノート

リンクタグの上にマウスを載せた時に、CSSだけではなく、JQueryでそれっぽくリンクを主張するいろいろ。

オンマウスで文字の色とリンクの背景を反転させる

色をanimateするには、JQueryUIが必要です。なので、HEADに以下を予め追加しておきます。

これはリンクです。

jQuery(document).ready(function($){
    $("a span , .post a").on({
        "mouseenter": function(){
            //マウスオーバーで文字の色を白に。背景を赤に。
            $(this).stop().animate( { color:"#fff" , backgroundColor: "#f01d4f" }, 200);
        },
        "mouseleave": function(){
            //マウスオーバーで文字の色を白に。背景を赤に。
            $(this).stop().animate( { color:"#f01d4f" , backgroundColor: 'transparent' }, 200);
        }
    });
});

$(“a span , .post a”)　としているのは、フロントページなどで特定のリンクだけに反映させたい部分には、aタグ内にspanで囲っておけばいいし、それ以外の投稿や固定ページでは、投稿者が意識しなくてもいいようにしたかったので。

マウスオーバーで薄くする

これはリンクです。

jQuery(document).ready(function($){
    $("a.fadeto").on({
        "mouseenter": function(){
            //マウスオーバーで透過率60%
            $(this).stop().fadeTo(100,0.6);
        },
        "mouseleave": function(){
            //マウスオーバーで透過率100%（透過なし）
            $(this).stop().fadeTo(100,1.0);
        }
    });
});