・やりたいこと
<div>で作ったボックス要素すべてにリンクをはる。
その際、hoverでボックス全ての色を変えたい。
・試してみたこと
.box{
background-color: #EEEEEE;
width: 100px;
height: 100px;
}
.box:hover {
background-color: #CCCCCC;
width: 100px;
height: 100px;
}
これで作ったボックスに、まるっとリンクを貼りました。
<a href=””><div></div></a>
こんな感じです。
・結果
MacOSXのサファリ、Firefoxでは期待した動作になりました。
WinのIEでは、色も変わらなければリンクも貼れませんでした。
・知りたいこと
1)WinIEではそのようなことはできないのか？
2)できるなら、何が間違っているのでしょうか？
URLは無くても結構です。
簡単なソースを書いて教えていただけると幸いです。
よろしくお願いします。
No.1
302
0
10pt
http://www.hatena.ne.jp/1108906913#
人力検索はてな - CSSに関する質問です。初心者ですが、笑わないでください。よろしくお願いします。 ・やりたいこと <div>で作ったボックス要素すべてにリンクをはる。 その際、hoverでボッ..
えっと・・・boxクラスがHTML側に見当たらないのですが。
boxクラスが無いと適用されないのが正しいです。
もしboxクラスが存在するのだとしたら
それはMSIEが不完全なHTMLを
読み込んだときにする補完の仕様が原因です。
その影響を受けないためには
.box{
background-color: #EEEEEE;
display:block;
width: 100px;
height: 100px;
}
.box:hover {
background-color: #CCCCCC;
width: 100px;
height: 100px;
}
<a class=”box” href=””>リンク</a>
と言った書き方があります。
No.2
243
20pt
livedoor
URLはダミーです。
divではなく、aタグにスタイルを指定してください。
その際、block要素にすることを忘れずに。
たとえばこんな感じです。
<style type=”text/css”>
<!--
a {
display:block;
border:1px solid #999;
background-color: #CCCCCC;
width:100px;
height: 100px;
}
a:hover {
background-color: #FFFF99;
}
-->
</style>
ありがとうございます。
補足で申し訳ないのですが、
入れたいのです。
そして、その「ほにゃらら」以外のボックス全部に
リンクをはり、hoverを指定したいのです。
質問下手ですいません…。
No.3
5402215
20pt
人力検索はてな
ご質問のような場合は、たとえばこんな感じでしょうか。
<html>
<haed>
<style type="text/css">
<!--
div#box {
width: 100px;
border: 1px #0000ff solid;
}
div#box a {
display: block;
color: #0000ff;
text-decoration: none;
}
div#box a:hover {
color: #ff0000;
background: #ffff00;
}
-->
</style>
</haed>
<body>
<div id="box">
<a href="
</div>
</body>
</html>
divで箱を作ったら、その中に
display: block
で指定したリンクを貼ってやるんです。
上の例では、boxというidで箱を指定して、
その中にクラスとしてのhoverを位置づけています。
近い！そう、それなんです。
この例で、Winの場合だと「ABCDEFG」の上にマウスが乗らないと
背景色が変わりませんよね？
MacのSafariやFirefoxだと、ボックスのborder内にマウスが
入ると色が変わるんです。
そうしたいのです…。
画像でなく、できるだけCSSでできないかなと思ってまして。
Win(IE)では無理なのでしょうか？
No.4
340
5pt
まず、HTMLにはブロック要素とインライン要素があり、作法的にインライン要素の中にブロック要素を含めてはいけません。
なのでインライン要素であるaタグの中にdivタグを書くのはおかしいと思います。
http://www.tohoho-web.com/css/basic.htm#Pseudo
とほほのスタイルシート入門（基礎知識）
また、hoverはa要素の定義済みクラスなのでdiv要素には使えないのでは？
http://www.openspc2.org/reibun/javascript/mouse/018/index.html
マウスが重なったら文字のスタイルを変える
自分で書くなら、JavaScriptを使いますね。
使用方法はURLを参考にしてください。
スタイルシートの回答にはなってないかも知れませんが。。。
はい、それは一応調べたのですが、SafariやFirefoxでは
できちゃうので…。
Winでもできちゃう、もしくはやり方があるんじゃないかなと。
TomCatさんの回答が近いのですが…。
回答ありがとうございました。
No.5
480
10pt
http://www.zspc.com/documents/css2/selector/hover.html
CSS2対応状況ガイド：:hover
リンク参照
CSSを少しばかり勉強した者です。
どうやら、IEでは <a>タグ以外には :hoverが適用されないようですね。
対策方法としては、
１.box:hoverを <a>タグに適用する。
２JavaScriptで対応する。
ですかね。
ありがとうございます。
なるほど、そうなのですか。
aのクラス指定をボックス要素にして、その中にぶちこむというのを
上記の回答で教えていただきましたが、それが近い気がする。
むーん…。
No.6
5402215
45pt
人力検索はてな
ああー。それじゃ、きっとこんな感じでしょう。
boxというidを用意してそれで箱を作るんじゃなくて、
a そのものを「箱」にしてしまえば、
その箱のどこにマウスが乗っても色が変わります。
div#box は、どの箱に対してそういう設定を適用するのか、
という識別のためだけに使います。
<html>
<haed>
<style type="text/css">
<!--
div#box{
/* ここの中は適宜必要に応じて指定。
箱を作ると言うより、
divで「どの箱」ということを指し示すid、
と考えてください */
}
div#box a {
/* 箱そのものを a で作ります */
display: block;
background: #eeeeee;
border: 1px #0000ff solid;
color: #0000ff;
text-decoration: none;
padding: 100px;
}
div#box a:hover {
color: #ff0000;
background: #cccccc;
}
-->
</style>
</haed>
<body>
<div id="box">
<a href="
</div>
</body>
</html>
どんなもんでしょうか(^-^)
完璧！これです、これこれ。
まさに、これです。ああ、ありがとうございます。
こんなに早く解決するとは…。感謝します。
そして、はてなにも。ありがとう。
izayoimizuki
2005/02/22 00:05:29
42
42
2
1
1
回答ありがとうございます。
あ、すいません、class指定しました。省略しちゃって…。
わかりずらくて申し訳ありませんでした。
と記述しました。