![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_09.png?e8efa67)
趣味のホームページを作っているのですが、a:hoverで、カーソルがリンクに乗ったときに背景色が変わるようにしています。
トップページのメニューをリストで作成しているのですが、リストの下から2番目くらいのリンクをカーソルで上下になぞると、リストの下の空白が縮むようになってしまいました。
言葉だけではわかりにくいと思うので、下に図を書きます。
------------------------------------------------
リストメニュー
------------------------------------------------
空白
------------------------------------------------
リストメニュー
------------------------------------------------
こんなふうに、いくつかのメニューを積み重ねている感じのデザインです。
それで、問題の現象は、
------------------------------------------------
・カテゴリ1
・カテゴリ2 ←下から2番目くらいのリンクをカーソルでなぞる
・カテゴリ3
------------------------------------------------
空白の部分が縮む。
------------------------------------------------
・カテゴリ4
・カテゴリ5 ←どの段のリストメニューも、同じ現象
・カテゴリ6
------------------------------------------------
こんな感じです。
a:hoverで背景色を指定しなければ、この現象は起きません。
でも、どうしてもCSSでリンクの背景色を変えたいんです。
ちなみに、IEではこの現象は起きますが、Firefoxでは起きませんでした。
IE特有のバグか何かですか?
どなたか解決法がわかる方、教えてください。
よろしくお願いします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_08.png?e8efa67)
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要素の件、早速直させていただきます。
ありがとうございました。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_08.png?e8efa67)
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で質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Instagram Instagramでバグが起きました。Androidです。 画像は左がストーリーにあげた後です。右が 1 2022/08/18 11:55
- Excel(エクセル) Excelで漢字人名が勝手に並び変わる(続) 4 2023/03/21 21:28
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- Excel(エクセル) エクセルの数式について教えてください。 7 2023/06/18 10:16
- C言語・C++・C# pythonのファイルの並びでの読み込みとリストについて 4 2022/04/13 03:52
- Excel(エクセル) Excel 値を返す数式についてです 3 2022/11/21 20:08
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Illustrator(イラストレーター) Illustratorでオブジェクトの色が勝手に変わって困っています。 4 2022/09/04 18:47
- ダイエット・食事制限 ローファットダイエットについてアドバイスをください。 現在、体脂肪率が28で肥満1型になった旦那のダ 1 2022/09/03 09:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マイページはどこを開くの
-
ホームページビルダーでプルダ...
-
Photoshop 7 画像に上の青い境...
-
ウインドウを毎回同じ位置、大...
-
デジタル時計の時刻合わせの方...
-
スクリプトって、何ですか?ど...
-
VBAで任意のウインドウのサイズ...
-
エクセルのシート上に別のシー...
-
リストビューをスクロールさせ...
-
別フォームから戻ったときのイ...
-
小さな表示窓の呼び方は
-
PL/Iについて、教えてください。
-
「Cancel = True」とはどういう...
-
Visual Basicから Spreadのスク...
-
子ウィンドウより親ウィンドウ...
-
Excelでワードアートや図を常に...
-
Excel VBAでの右クリックのポッ...
-
5ちゃんねる
-
PDFを(htmlのように)無限に縦...
-
表示するウィンドウのサイズを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
マイページはどこを開くの
-
ホームページビルダーでプルダ...
-
Photoshop 7 画像に上の青い境...
-
オシロスコープで出た波形をUSB...
-
Sonic MyDVDで・・・
-
フランス語 序数表記入力(er)...
-
秀丸エディタで、文章に引用符
-
Adobe Lightroom classic 画像...
-
DVDStyler、リモコンのカーソル...
-
ツールボックスがいきなり消え...
-
HPBでの階層メニュー作成
-
ホームページビルダー9 リン...
-
フォトショップ、「パレット格...
-
FLASHで、メニューボタンクリッ...
-
並べ替えのできるテキストエディタ
-
左側にメニュー欄を作って、右...
-
ソフトのダウンロードで「管理...
-
Dreamweaveの使い方...
-
Adobe Encore ブルーレイ構築
-
アクセスのレポート印刷で郵便...
おすすめ情報