スポンサーサイト

一定期間更新がないため広告を表示しています

並べる

Plasma Grid  A Flexbox Grid

リンク付き画像をマウスオーバーした時の表示

この記事のHTML
<div class="box">
<div class="image">
<a href="http://img-cdn.jg.jugem.jp/def/263999/20130904_753377.jpg" rel="lightbox"><img src="http://img-cdn.jg.jugem.jp/def/263999/20130904_753377_t.jpg" alt="Q.画像のマウスオーヴァー時の背景色を消したい" class="pict" height="200" width="200"></a>
</div>
<div class="text">
<p><a href="https://secure.jugem.jp/support/bbs/alldis.php?id=6193" target="_blank">Q.画像のマウスオーヴァー時の背景色を消したい | JUGEM ユーザー助け合い掲示板</a></p>
</div>
</div>
その部分の表示をしたCSS
div.image a:hover img{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
}

div.image内にあるリンクされた画像をにa:hover imgカーソールを重ねると画像の表示が50%透過されるように指定しました。

a:hover時にバックグラウンドカラーを高さ100%に設定する方法はあるのか現在確認中です。

追記:テスト中
追記:2013年9月5日
cssの:hoverの色々な使い方 - ファンブログハック

このサイトさんの記事が参考になりました。

属性名:hover {background-color:色の指定;}
<a href="http://img-cdn.jg.jugem.jp/def/263999/20130904_753377.jpg" rel="lightbox">
<img src="http://img-cdn.jg.jugem.jp/def/263999/20130904_753377_t.jpg" alt="Q.画像のマウスオーヴァー時の背景色を消したい" class="linkimg" height="200" width="200">
</a>
.linkimg {padding:20px; border:1px #cccccc solid;}
.linkimg:hover {background-color:#bccddb;}

JUGEM ブログで追加したカテゴリは削除しないほうがいいかもしれない

現在のこのブログのカテゴリ

cid=3は[ JUGEM ] HTML CSSと設定されていますがこのカテゴリの記事がないのでエラーページが表示されるので、この記事のカテゴリを[ JUGEM ] HTML CSSと設定してみます。

  • このエントリーをはてなブックマークに追加
  • Check
1