オンマウス（マウスオーバー）以外を透かす
投稿日：
オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。
でも今回は
オンマウス以外に変化をつけていきたいと思います。
個人的には、少なめのメニューやカテゴリーリストされたタイトルに使えそうかな？って思っています。
単純に横並びしたテキストリンクの場合
<ul class="test01"> <li><a href="#">サンプル１</a></li> <li><a href="#">サンプル２</a></li> <li><a href="#">サンプル３</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部分を変えるだけでもいろいろとできそうです。
関連記事
-
-
WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう！ってことで、「WordPress Download M …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③
9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …
-
-
MTS Simple Booking-C編集者ができるようにする
予約システムをスタッフがする WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者（スタッフ）が …
-
-
あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …
- PREV
- できた！360度カメラの画像をWordPressに
- NEXT
- SVG div で変形を作る
