オンマウス（マウスオーバー）以外を透かす
投稿日：
オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。
でも今回は
オンマウス以外に変化をつけていきたいと思います。
個人的には、少なめのメニューやカテゴリーリストされたタイトルに使えそうかな？って思っています。
単純に横並びしたテキストリンクの場合
html部分
<ul class="test01"> <li><a href="#">サンプル１</a></li> <li><a href="#">サンプル２</a></li> <li><a href="#">サンプル３</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部分を変えるだけでもいろいろとできそうです。
関連記事
-
-
画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。 今回は、WordPressでトップページ（フロントページ）のみ、動きのある画像を表示した …
-
-
ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …
-
-
トップページに投稿記事をランダムに表示 通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形（例えば、横幅1900px,高さ600pxくらい） …
-
-
1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。 2.バックアップと復元 Updr …
- PREV
- できた！360度カメラの画像をWordPressに
- NEXT
- SVG div で変形を作る
