マウスオーバーでふわっとするCSS

2013/12/30

by sayo

CSSだけでマウスオーバーでふわっとさせる方法です。

HTMLはこんな感じ。

<div id=”css_hover_huwa”>
 <a href=”#”>サンプルです。マウスを乗せるとふわっとします</a>
</div>

CSSはこうです

#css_hover_huwa a:link
,#css_hover_huwa a:visited {
display:block;
 -moz-transition: all 0.2s linear 0;
 -webkit-transition: all 0.2s linear 0;
background-color:#61ecc7;
color:#333;
}
#css_hover_huwa a:hover
,#css_hover_huwa a:active {
filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
color:#333;
text-decoration:none;
}

関連するコンテンツ

コメント

コメントを残す

この記事と同じ に関する記事です。お役に立ちそうなのはどれですか?

記事はありませんでした

気になる単語をサイト内検索できます

>> 記事一覧を見る(TOPページ)