オンマウス(マウスオーバー)以外を透かす
投稿日:
オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。
でも今回は
オンマウス以外に変化をつけていきたいと思います。
個人的には、少なめのメニューやカテゴリーリストされたタイトルに使えそうかな?って思っています。
単純に横並びしたテキストリンクの場合
<ul class="test01"> <li><a href="#">サンプル1</a></li> <li><a href="#">サンプル2</a></li> <li><a href="#">サンプル3</a></li> </ul>
.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; }
$(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部分を変えるだけでもいろいろとできそうです。
関連記事
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②
1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …
- PREV
- できた!360度カメラの画像をWordPressに
- NEXT
- SVG div で変形を作る