wordpress

オンマウス(マウスオーバー)以外を透かす

投稿日:

オンマウス以外

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。

でも今回は

オンマウス以外に変化をつけていきたいと思います。

個人的には、少なめのメニューやカテゴリーリストされたタイトルに使えそうかな?って思っています。

 

単純に横並びしたテキストリンクの場合

 

html部分

<ul class="test01">
<li><a href="#">サンプル1</a></li>
<li><a href="#">サンプル2</a></li>
<li><a href="#">サンプル3</a></li>
</ul>
css部分

.test01 li{
list-style:none;
display:inline-block;
margin:1rem;
}
.test01 li a{
text-decoration:none;
font-size:2rem;
font-weight:bold;
}
.test01 li a:hover{
color:#4682b4;
}
js部分

$(function() {
    var testmenu = $('.test01 a');
    testmenu.hover(
        function(){
            testmenu.not(this).stop().fadeTo(500,0.3);
        },
        function () {
            testmenu.not(this).stop().fadeTo(500,1);
        }
    );
});

設定を変えるだけで他にも使える

テキストのリンクじゃなくても画像とかにも使えそうですね。

または、画像の上にテキストのリンクを重ねて使ってみるのも良さそうです。

リストを横並びではなく縦に並べてみたり、css部分を変えるだけでもいろいろとできそうです。

Web集客に特化したWordPressテーマ Emanon

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

予約システムを編集者

MTS Simple Booking-C編集者ができるようにする

  予約システムをスタッフがする   WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …