![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
http://fukuganrss.blog27.fc2.com/
上記のサイトの画像にマウスカーソルを合わせると画像がちょっと暗く影っぽくなりますよね?
このやり方のcssのソースが分かる方、教えて下さい。
No.3ベストアンサー
- 回答日時:
こんにちは。
初めまして。画像は一枚しか用意できなくて、カーソルオンで画像を暗くしたい。
ただしcssで、ということですよね。
そうすると、
html
<div>
<a href="#">テキストテキスト</a>
</div>
css
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にしてください。
また、まだまだ生き残ってるIE6では半透明のpngが使えませんので、
IE6も対応ブラウザに入れるようであればハックを使ってあげてください。
でも正直ここまでやるのであれば画像を二個用意した方が早いんじゃないかとか、
javascript使った方が楽だよね、とか思います。
No.2
- 回答日時:
CSSではありません。
javascriptを使ってます。そして、参考になるサイトでもありません。
【引用】____________ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
* メーカー独自拡張のHTMLを使う。
* テキストを画像に置き換えて表現する。★
* 余白制御のために画像を用いる。★
* ページレイアウトの目的で表を用いる。★
* HTMLでページを作らずにプログラムに頼る。★
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
を絵に描いたような酷いものです。特に★印について、上記リンク先をお読みください。
まっとうな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)で透明画像をかぶせる。
と言う手法が楽でしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- 一眼レフカメラ 新品の標準レンズ 画角の中央当たりにゴミ?が写る。対処法は? 9 2022/09/12 08:27
- 写真・ビデオ 画像の加工にお詳しい方教えてください。 添付の画像のような、暗くて冷たい雰囲気になる画像加工アプリの 1 2022/11/01 18:45
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- FC2ブログ どうやるのか、さっぱり分かりません。ブログ引っ越したいと思っています(URLだけを変えたい)。 3 2022/12/01 07:40
- Excel(エクセル) エクセル VBA セルの結合 2 2022/09/07 11:48
- デジタルカメラ コンデジ格安中古を探しています、スマホのフラッシュ無し室内暗所撮影で限界を感じていますので・・。 3 2023/04/17 18:59
- 格安スマホ・SIMフリースマホ 対処法あれば、教えて下さい。 2 2022/08/13 12:45
- マウス・キーボード マウスカーソルの変更について 1 2022/11/05 20:03
- 作詞・作曲 楽譜のリズムのとり方?をおしえていただきたいです 画像のような場合です。 赤い矢印が、1,2,3,4 7 2022/07/17 21:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
ウエブアートデザイナーについて
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
ドリームウィーバーで画像を縮小
-
HTMLで使う「見出し」は英文で...
-
同じ画像 複数回使用
-
クリックで背景を変化させる
-
壁紙の配置について
-
フッターの背景に色を指定した...
-
背景の画像を左上に一つ固定す...
-
イメージマップ内での画像の変...
-
body指定したimgが複雑なデザイ...
-
背景画像の上に、比率を保持し...
-
画像の上にテキスト配置で、拡...
-
htmlタグで背景に画像を敷き詰...
-
lightbox2で画像を天地左右中央...
-
javascriptのキャラクター画像...
-
CSSでの動画のマスク処理
-
【Webサイト】画像が小さく表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報