趣味のホームページを作っているのですが、a:hoverで、カーソルがリンクに乗ったときに背景色が変わるようにしています。
トップページのメニューをリストで作成しているのですが、リストの下から2番目くらいのリンクをカーソルで上下になぞると、リストの下の空白が縮むようになってしまいました。
言葉だけではわかりにくいと思うので、下に図を書きます。
------------------------------------------------
リストメニュー
------------------------------------------------
空白
------------------------------------------------
リストメニュー
------------------------------------------------
こんなふうに、いくつかのメニューを積み重ねている感じのデザインです。
それで、問題の現象は、
------------------------------------------------
・カテゴリ1
・カテゴリ2 ←下から2番目くらいのリンクをカーソルでなぞる
・カテゴリ3
------------------------------------------------
空白の部分が縮む。
------------------------------------------------
・カテゴリ4
・カテゴリ5 ←どの段のリストメニューも、同じ現象
・カテゴリ6
------------------------------------------------
こんな感じです。
a:hoverで背景色を指定しなければ、この現象は起きません。
でも、どうしてもCSSでリンクの背景色を変えたいんです。
ちなみに、IEではこの現象は起きますが、Firefoxでは起きませんでした。
IE特有のバグか何かですか?
どなたか解決法がわかる方、教えてください。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
No.1です。
補足で記入いただいた通りで書いてみましたが
言われている問題が発生しませんでした。
なので他の部分に問題があるのかもしれません。
尚、正確なa要素の書く順番は下記の通りです。
a{
text-decoration:underline;
}
a:link{
color:#330000;
}
a:visited{
color:#330000;
}
a:hover{
color:#ffffff;
background-color:#993300;
}
a:active{
color:#330000;
}
※hoverとactiveの順序が逆になります。
返信ありがとうございます。
問題部分が解決いたしましたので、お知らせします。
CSSのulの部分に、margin-bottom:0;か、
border:1px solid #ffffff;のいずれかを加えることで、
空白が動くことはなくなりました。
ご指摘のa要素の件、早速直させていただきます。
ありがとうございました。
No.1
- 回答日時:
トラブルが起こっている部分とその前後のCSSとhtmlタグを記入いただければ
どこに問題が起きているのかわかるかもしれません。
また、a要素は順番通りに書かないとブラウザによっては反映されないことがあります。
正しい順番
a:link{ }
a:visited{ }
a:hover{ }
a:active{ }
参考ページ[実は重要!スタイルシートの記述順!]
http://allabout.co.jp/internet/hpcreate/closeup/ …
[疑似クラスの指定]
http://www.tagindex.com/stylesheet/basic/format4 …
この回答への補足
返信が遅くなってすみません。
不具合が起きる部分のソースを、再現(一部コピー)して記載します。
ソース内のコメントは無視してください。
a{
text-decoration:underline;
}
a:link{
color:#330000;
}
a:visited{
color:#330000;
}
a:active{
color:#330000;
}
a:hover{
color:#ffffff;
background-color:#993300;
}
ul{
margin-top:5px;
}
li{
background-image:url('li.gif');
background-repeat:no-repeat;
background-position:0 6px;
list-style:none;
padding-left:20px;
}
.con_left{
float:left;
width:600px;
margin-top:9px;
line-height:200%;
}
.aisatu{
width:590px;
margin:5px 5px 10px 5px;
border:1px solid #ff8c00; /* darkorange */
}
.aisatu_in{
margin:3px;
padding:6px;
line-height:170%;
border:1px dotted #ff8c00;
}
.midashi{
clear:left;
width:600px;
font-weight:bold;
color:#ffffff;
background-image:url('midashi_1.gif');
background-repeat:no-repeat;
height:30px;
font-size:16px;
padding-top:2px;
}
.m_in{
padding-left:30px;
}
.komidashi{
float:left;
width:287px;
margin-right:3px;
}
.komi_in{
width:290px;
}
.komidashi2{
float:left;
width:287px;
margin-left:3px;
}
-----ここまでがCSSのソースです-----
-----ここからはHTMLのソースです-----
<div class="con_left"><!-- コンテンツ左ここから -->
<div class="aisatu"><!-- 外枠ここから -->
<div class="aisatu_in">
<div class="kaku_mi">
見出し2
</div>
<div class="message"><!-- 本文ここから -->
ここに本文
</div><!-- 本文ここまで -->
</div>
</div><!-- 外枠ここまで -->
<div class="midashi">
<div class="m_in">
見出し3
</div>
</div>
<div class="komidashi">
<div class="komi_in">
<ul>
<li><a href="index.html">1</a></li>
<li><a href="index.html">2</a></li>
<li><a href="index.html">3</a></li>
<li><a href="index.html">4</a></li>
<li><a href="index.html">5</a></li>
<li><a href="index.html">6</a></li>
</ul>
</div>
</div>
<div class="komidashi2">
<div class="komi_in">
<ul>
<li><a href="index.html">7</a></li>
<li><a href="index.html">8</a></li>
<li><a href="index.html">9</a></li>
<li><a href="index.html">10</a></li>
<li><a href="index.html">11</a></li>
<li><a href="index.html">12</a></li>
</ul>
</div>
</div>
</div><!-- コンテンツ左ここまで -->
こんな感じです。
これだけで、何かわかりますでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マイページはどこを開くの
-
ホームページビルダーでプルダ...
-
IEでのマウス右クリック時のメ...
-
ホームページビルダー9 リン...
-
Photoshop 7 画像に上の青い境...
-
デジタル時計の時刻合わせの方...
-
スクリプトって、何ですか?ど...
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
一定時間おきにアラームやポッ...
-
[Java] Edgeでのアドレスバー非...
-
Outlookでこのような表示がされ...
-
Javascript_submit()完了後に処...
-
別フォームから戻ったときのイ...
-
Excel VBAでの右クリックのポッ...
-
エクセルVBAでフォームのListbo...
-
ポップアップと作業ウィンドウ...
-
ワードの「作業ウィンドウ」が...
-
Excelでワードアートや図を常に...
-
リトルバスターズEXを中古で購...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
マイページはどこを開くの
-
Photoshop 7 画像に上の青い境...
-
フランス語 序数表記入力(er)...
-
蔵衛門9のCDへの焼き方
-
Adobe Lightroom classic 画像...
-
秀丸エディタで、文章に引用符
-
DVDStyler、リモコンのカーソル...
-
HPBでの階層メニュー作成
-
アクセスのレポート印刷で郵便...
-
ホームページの上部のメニュー...
-
並べ替えのできるテキストエディタ
-
ホームページビルダーでプルダ...
-
FLASHのまわりに変な枠線が
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
Javascript_submit()完了後に処...
-
ウインドウを毎回同じ位置、大...
-
Excelでワードアートや図を常に...
-
一定時間おきにアラームやポッ...
-
スクリプトって、何ですか?ど...
おすすめ情報