画像にオンマウスで暗くする方法

質問

http://fukuganrss.blog27.fc2.com/
上記のサイトの画像にマウスカーソルを合わせると画像がちょっと暗く影っぽくなりますよね？
このやり方のcssのソースが分かる方、教えて下さい。

回答No.3

karita_83 · ベストアンサー

こんにちは。初めまして。

画像は一枚しか用意できなくて、カーソルオンで画像を暗くしたい。
ただしcssで、ということですよね。

そうすると、
ｈｔｍｌ

<div>
<a href="#">テキストテキスト</a>
</div>

ｃｓｓ

div
{
background:画像;
width:画像の大きさ
height:画像の大きさ
}

a
{
display:block;
width:画像の大きさ
height:画像の大きさ
text-align:left;
text-indent:-9999px;
}

a:hover
{
background:半透明の任意の暗さになってるpng画像;
width:画像の大きさ
height:画像の大きさ
display:block;
text-align:left;
text-indent:-9999px;
}

多分こんなカンジでご指定いただいたページと同じような動きをするのではないかなと思います。
試してないのでわからないですが。
文字を出したいようであれば、text-indentを0pxにしてください。

また、まだまだ生き残ってるＩＥ6では半透明のpngが使えませんので、
IE6も対応ブラウザに入れるようであればハックを使ってあげてください。

でも正直ここまでやるのであれば画像を二個用意した方が早いんじゃないかとか、
javascript使った方が楽だよね、とか思います。

回答No.2

ORUKA1951

CSSではありません。javascriptを使ってます。

そして、参考になるサイトでもありません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
* メーカー独自拡張のHTMLを使う。
* テキストを画像に置き換えて表現する。★
* 余白制御のために画像を用いる。★
* ページレイアウトの目的で表を用いる。★
* HTMLでページを作らずにプログラムに頼る。★
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

を絵に描いたような酷いものです。特に★印について、上記リンク先をお読みください。

まっとうなHTMLで書くとしたら、
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
　でよいですね。
　その上で、
div.nav ul
div.nav ul li
div.nav ul li a
をブロックに変換して
そのliを小さなサイズにして、floatさせる。
aは、liいっぱいに広げ、text-decoration:none
その後、a:hover(動的擬似クラス、詳細度+10)で透明画像をかぶせる。

と言う手法が楽でしょう。

回答No.1

486HA

ここで質問しなくてもブラウザでページ・ソースを確認すれば済むことです。