JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年08月 / 07月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>09月

アクセスランキング

[ジャンルランキング]
コンピュータ
342位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
45位
アクセスランキングを見る>>

ロールオーバー効果をCSSで指定する方法

これまでロールオーバーの処理はJSで行っていたんですが、CSSで簡単に行う方法を思いついたので紹介します。

a.r_o{
    display: block;
    background-image: url(blue.png);
    width: 80px;
    height: 25px;
}
a.r_o:link{
    background-image: url(blue.png);
}
a.r_o:hover{
    background-image: url(blue2.png);
}

「width: 80px;」「height: 25px;」の部分には使用する画像のサイズ、「url(blue.png)」は通常時の画像、「url(blue2.png)」はロールオーバー時の画像を指定してください。

実際のリンクでは、
「<a href="リンク先" class="r_o" title="リンク"> </a>」
みたいな感じで使います。

SEO対策的には微妙かもしれませんが、とりあえずこれで実装できます。
 


 
   CSS    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。