CSSに関する質問です。初心者ですが、笑わないでください。よろしくお願いします。


・やりたいこと
<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は無くても結構です。
簡単なソースを書いて教えていただけると幸いです。

よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/02/20 22:41:53
  • 終了:--

回答(6件)

id:izayoimizuki No.1

izayoimizuki回答回数302ベストアンサー獲得回数02005/02/20 23:08:42

ポイント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>

と言った書き方があります。

id:notjust

回答ありがとうございます。

あ、すいません、class指定しました。省略しちゃって…。

わかりずらくて申し訳ありませんでした。

と記述しました。

2005/02/20 23:17:46
id:KAIUN No.2

KAIUN回答回数24ベストアンサー獲得回数32005/02/20 23:14:29

ポイント20pt

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>

id:notjust

ありがとうございます。

補足で申し訳ないのですが、

の中に本当はいろいろ

入れたいのです。

ほにゃらら
という感じです。

そして、その「ほにゃらら」以外のボックス全部に

リンクをはり、hoverを指定したいのです。

質問下手ですいません…。

2005/02/20 23:21:19
id:TomCat No.3

TomCat回答回数5402ベストアンサー獲得回数2152005/02/20 23:17:32

ポイント20pt

http://www.hatena.ne.jp/1

人力検索はてな

ご質問のような場合は、たとえばこんな感じでしょうか。

<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を位置づけています。

id:notjust

近い!そう、それなんです。

この例で、Winの場合だと「ABCDEFG」の上にマウスが乗らないと

背景色が変わりませんよね?

MacのSafariやFirefoxだと、ボックスのborder内にマウスが

入ると色が変わるんです。

そうしたいのです…。

画像でなく、できるだけCSSでできないかなと思ってまして。

Win(IE)では無理なのでしょうか?

2005/02/20 23:28:12
id:kgi No.4

kgi回答回数34ベストアンサー獲得回数02005/02/20 23:32:14

ポイント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を参考にしてください。

スタイルシートの回答にはなってないかも知れませんが。。。

id:notjust

はい、それは一応調べたのですが、SafariやFirefoxでは

できちゃうので…。

Winでもできちゃう、もしくはやり方があるんじゃないかなと。

TomCatさんの回答が近いのですが…。

回答ありがとうございました。

2005/02/20 23:40:51
id:oh_tsu No.5

oh_tsu回答回数48ベストアンサー獲得回数02005/02/20 23:44:30

ポイント10pt

リンク参照

CSSを少しばかり勉強した者です。

どうやら、IEでは <a>タグ以外には :hoverが適用されないようですね。

対策方法としては、

1.box:hoverを <a>タグに適用する。

2JavaScriptで対応する。

ですかね。

id:notjust

ありがとうございます。

なるほど、そうなのですか。

aのクラス指定をボックス要素にして、その中にぶちこむというのを

上記の回答で教えていただきましたが、それが近い気がする。

むーん…。

2005/02/20 23:50:08
id:TomCat No.6

TomCat回答回数5402ベストアンサー獲得回数2152005/02/20 23:47:37

ポイント45pt

http://www.hatena.ne.jp/2

人力検索はてな

ああー。それじゃ、きっとこんな感じでしょう。

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>

どんなもんでしょうか(^-^)

id:notjust

完璧!これです、これこれ。

まさに、これです。ああ、ありがとうございます。

こんなに早く解決するとは…。感謝します。

そして、はてなにも。ありがとう。

2005/02/20 23:58:14
  • id:izayoimizuki
    izayoimizuki 2005/02/22 00:05:29
    MSIE6は・・・

    MSIE6はhover等の擬似属性はa要素かつhref属性を持つものにしか適用されません。
    GeckoやKHTMLが対応している
    http://www.w3.org/TR/CSS21/
    によれば擬似属性はリンクに対してしか適用できないもの
    (即ちlink,visited)以外は全ての属性に適用されるとなっています。
    activeは選択していると言う意なのでリンクである必要が無いとの事。
    しかしMSIE6が対応している
    http://www.w3.org/TR/CSS1
    ではリンクにのみ適用されるとなっています。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません