みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

a:hoverでbackground-colorを指定すると、空白が縮む

趣味のホームページを作っているのですが、a:hoverで、カーソルがリンクに乗ったときに背景色が変わるようにしています。

トップページのメニューをリストで作成しているのですが、リストの下から2番目くらいのリンクをカーソルで上下になぞると、リストの下の空白が縮むようになってしまいました。

言葉だけではわかりにくいと思うので、下に図を書きます。

------------------------------------------------
リストメニュー
------------------------------------------------
空白
------------------------------------------------
リストメニュー
------------------------------------------------

こんなふうに、いくつかのメニューを積み重ねている感じのデザインです。
それで、問題の現象は、

------------------------------------------------
・カテゴリ1
・カテゴリ2 ←下から2番目くらいのリンクをカーソルでなぞる
・カテゴリ3
------------------------------------------------
空白の部分が縮む。
------------------------------------------------
・カテゴリ4
・カテゴリ5 ←どの段のリストメニューも、同じ現象
・カテゴリ6
------------------------------------------------

こんな感じです。
a:hoverで背景色を指定しなければ、この現象は起きません。
でも、どうしてもCSSでリンクの背景色を変えたいんです。

ちなみに、IEではこの現象は起きますが、Firefoxでは起きませんでした。
IE特有のバグか何かですか?

どなたか解決法がわかる方、教えてください。
よろしくお願いします。

投稿日時 - 2008-11-15 11:46:12

QNo.4480046

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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の順序が逆になります。

投稿日時 - 2008-11-15 15:39:20

お礼

返信ありがとうございます。
問題部分が解決いたしましたので、お知らせします。

CSSのulの部分に、margin-bottom:0;か、
border:1px solid #ffffff;のいずれかを加えることで、
空白が動くことはなくなりました。

ご指摘のa要素の件、早速直させていただきます。
ありがとうございました。

投稿日時 - 2008-11-15 17:20:33

ANo.1

トラブルが起こっている部分とその前後のCSSとhtmlタグを記入いただければ
どこに問題が起きているのかわかるかもしれません。

また、a要素は順番通りに書かないとブラウザによっては反映されないことがあります。
正しい順番
a:link{  } 
a:visited{  }
a:hover{  }
a:active{  }

参考ページ[実は重要!スタイルシートの記述順!]
http://allabout.co.jp/internet/hpcreate/closeup/CU20050621A/index3.htm
[疑似クラスの指定]
http://www.tagindex.com/stylesheet/basic/format4.html

投稿日時 - 2008-11-15 12:31:27

補足

返信が遅くなってすみません。
不具合が起きる部分のソースを、再現(一部コピー)して記載します。
ソース内のコメントは無視してください。

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>&nbsp;<a href="index.html">1</a></li>
<li>&nbsp;<a href="index.html">2</a></li>
<li>&nbsp;<a href="index.html">3</a></li>
<li>&nbsp;<a href="index.html">4</a></li>
<li>&nbsp;<a href="index.html">5</a></li>
<li>&nbsp;<a href="index.html">6</a></li>
</ul>
</div>
</div>
<div class="komidashi2">
<div class="komi_in">
<ul>
<li>&nbsp;<a href="index.html">7</a></li>
<li>&nbsp;<a href="index.html">8</a></li>
<li>&nbsp;<a href="index.html">9</a></li>
<li>&nbsp;<a href="index.html">10</a></li>
<li>&nbsp;<a href="index.html">11</a></li>
<li>&nbsp;<a href="index.html">12</a></li>
</ul>
</div>
</div>

</div><!-- コンテンツ左ここまで -->

こんな感じです。
これだけで、何かわかりますでしょうか。

投稿日時 - 2008-11-15 14:27:28

あなたにオススメの質問