![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_05.png?e8efa67)
CSSのみでロールオーバーの指定をしたいとき、皆さんはどのような方法を使われていますか?
・a:hoverで画像を入れ替える
(ボタン画像を背景に指定し、文字をインデントで飛ばしている時)
・a:hoverでボタン部分の背景をnoneにして、さらに後ろにある背景を表示させる
・通常時とhover時用の画像を一枚の画像にまとめて背景に指定し、a:hover時に背景画像を移動させる
などなど。
いろいろとやり方はあるかと思いますが、皆さんがどのようにされているか教えていただけるとうれしいです。
よろしくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
基本はjavascriptでやるべきだと思っていますが、どうしてもCSSという条件でなら今ならlist-item-imageじゃないですかね。
text-indentを使わない分弱点が少ないです。
ただしIE6とモダンブラウザのみで、IE5.5以下は切り捨てになります。
<a href="#">
<span>あああ</span>
</a>
a{
width:120px;
height:50px;
overflow:hidden;
}
a span {
display:list-item;
list-style:none url(link.gif) inside;
}
a:hover span{
list-style-image:url(hover.gif);
}
haslayoutがらみでもう少しなにかやらないといけなかった気がしますが・・・
ずっと前に作ったやつなのでよく覚えてないですが↓みたいな方法もあります。
<p class="RollOver"><a href="#"><img src="link.gif"></a></p>
/* RollOver -- IE4~ MacIE5.1~ NN6.2~ FF1~ OP7~ SF1~ */
.rollOver {
display:table;}
.rollOver a {
display:table-cell !important;
display:inline-block;
text-decoration:none;
background:url(hover.gif) transparent 0 0;}
.rollOver a img {
position:relative;}
.rollOver a:hover {
background-position: 0% 0%;}
.rollOver a:hover img {
z-index:-1;}
/* RollOver End */
基本はjavascriptでやるべき
なのですね。
CSSでやったほうがいい、と勘違い?していました。
大変参考になりました。
ありがとうございました。
No.2
- 回答日時:
どこからどこまでがアンカーとして有効なのかわかるように、hover指定はしてほしいですね。
colorでもbackgroundでも、borderでもtext-decorationでもいいですし。
linkさえ指定なしにしてもらえると、ブラウザの設定の色が反映されるのでいいのですが。
クリックの代わりとしてmouseover/hoverを使うのは、わたしも好ましいとは思いません。
> いろいろとやり方はあるかと思いますが、皆さんがどのようにされているか教えていただけるとうれしいです。
ネットワークリソース、ファイルサイズの節約の意味も込めて、
JavaScript/CSSいずれも、画像をひとまとめにする方法にするようにしています。
(画像の作り方や作成手間の関係で変わります。)
> (ボタン画像を背景に指定し、文字をインデントで飛ばしている時)
この方法はCSSオン、画像オフの場合に文字が表示されなくなりますから、好ましくないと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
lightbox2で画像を天地左右中央...
-
background-repeat CSS で切れ...
-
リストビューのTextBackground...
-
PNGがうまく表示されない・・・。
-
CSSでの動画のマスク処理
-
WEB上でディレクトリ内の画像を...
-
CSS マウスオーバーでテキスト...
-
【Webサイト】画像が小さく表示...
-
LightBoxの矢印の出し方
-
dreamweaverでテンプレートを作...
-
要素の幅をいろんな写真の幅に...
-
htmlについて教えてください。 ...
-
IMGタグで画像の繰り返し使用は…
-
CSSで背景画像をランダムに表示...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
透過背景画像のビットマップ形...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-sizeの背景で最小値...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
コーディング中、右側に謎の余...
-
particles.jsの背景の上にテキ...
-
背景画像が半分しか表示されない
-
htmlかcssで背景の白い枠をなく...
-
LightBoxの矢印の出し方
-
画像の上に
-
gif画像でたまに背景がグレーに...
おすすめ情報