JQuery リンクのHover時のデザインいろいろ

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

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

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

これはリンクです。

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);
        }
    });
});

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);
        }
    });
});

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);

}

});