画像ロールオーバーからテキストと背景のロールオーバーへ

解決済

質問者：rubato
質問日時：2006/09/15 16:13
回答数：6件

リンクメニューの部分ですが、現在画像でロールオーバーさせている（背景色と文字色が変化する）のですが、そのリンク部分の文字はテキストにするようにとの指示がありました。
画像ではなくテキストにした場合に背景色と文字色が変化するにはどうすればよいでしょうか？
下記左メニュー部分です。
http://www8.ocn.ne.jp/~soken-33/kono/
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ygyo0078
回答日時：2006/09/15 22:37

すみません、ちょっと説明不足でしたね。

幅を指定すれば解決すると思います。

.xxx a {
color:#xxx;
background:#xxx;
display:block;
width:(枠の横幅)px;
height:(枠の縦幅)px;
}

.xxx a:hover {
color:#xxx;
background:#xxx;
}

枠の大きさが違うリンクが何種類かあったようなので、
種類の数だけ上記のCSSを記述します。
それを、class="xxx"で適用させます。

- 0
- 件

通報する

この回答へのお礼

詳しく分かりやすいご回答ありがとうございました。早速試してみました！どうもありがとうございました。

通報する

お礼日時：2006/09/19 09:40

No.6

回答者： yambejp
回答日時：2006/09/16 14:32

メニューはulでやるというのがハヤリのようで、

構造的にも望ましいでしょう。
以下のようにしてみてください。
ポイントとしてはアンカー(aタグ)をblock要素にして
幅を指定し、メニュー（このばあいul）の幅とあわせる
ことです。

まずcssファイルを用意します。
//menu.css
.menu ul{
width:120px;
list-style:none;
padding:0px;
margin:0px;
}
.menu a{
width:120px;
height:25px;
text-decoration:none;
display:block;
border-width:1px;
border-style:solid;
text-align:center;
}
.menu a:hover{
font-size:120%;
font-weight:bold;
}
.menu1 a:link , .menu1 a:visited {
background-color:ffecec;
color:#000000;
}
.menu1 a:hover{
background-color:#c00000;
color:#ffffff;
}
.menu2 a:link , .menu2 a:visited {
background-color:ecffec;
color:#000000;
}
.menu2 a:hover{
background-color:#00c000;
color:#ffffff;
}

htmlファイルはこんな感じです。
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="menu">
<ul class="menu1">
<li><a href="#">menu1-1</a></li>
<li><a href="#">menu1-2</a></li>
<li><a href="#">menu1-3</a></li>
<li><a href="#">menu1-4</a></li>
<li><a href="#">menu1-5</a></li>
</ul>
<ul class="menu2">
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
<li><a href="#">menu2-3</a></li>
<li><a href="#">menu2-4</a></li>
<li><a href="#">menu2-5</a></li>
</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございました。
ulというやり方があるのですね。勉強になりました。どうもありがとうございました。

通報する

お礼日時：2006/09/19 09:44

No.4

回答者： m035
回答日時：2006/09/15 22:07

>>2

>hoverはIE専用では？
一昔前はともかく、最近のブラウザのほとんどで動作します。
むしろ、IEの方がA要素以外で動作しない点では劣っているともいえます。

>>0
HTMLが
<a href="">text</a>
で、CSSが
A{color:#0000FF;background:#FFFFFF}
A:hover{color:#FFFFFF;background:#0000FF}
のように書かれていれば恐らくA:hoverでうまくロールオーバーできます。
それでもA:hoverがうまく動作しない場合は参考リンクを見て、それでも駄目ならWeb Page Designのカテゴリで質問すれば良いと思います。
JavaScriptに依存したロールオーバーよりかCSSのA:hoverの方が良いでしょうし、JavaScript無効時を考えて両方使っても良いでしょうから。

参考URL：http://allabout.co.jp/internet/hpcreate/closeup/ …

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございました。#1さんと同じ原理ですね！参考URLも分かりやすかったです。どうもありがとうございました。

通報する

お礼日時：2006/09/19 09:39

No.3

回答者： VCAT
回答日時：2006/09/15 20:53

そういうことですか。

原理的にはこういうことです。これを応用してリンクにすればよいのでは？
<html>
<head>
<title>untitled</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="div1"
onMouseover="changeColor('#ffffff','#ffa64d')"
onMouseout="changeColor('#000000','#ffffff')">
　お問い合わせ</div>
</body>
</html>

但し、私はこのような場合は実際にはクロージャを使いますが、
それはご自分でまた勉強してください。