人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

よろしくお願いします。

●質問者: notjust
●カテゴリ:コンピュータ 趣味・スポーツ
✍キーワード::hover background-color BOX CSS firefox
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● izayoimizuki
●10ポイント

http://www.hatena.ne.jp/1108906913#

人力検索はてな - CSSに関する質問です。初心者ですが、笑わないでください。よろしくお願いします。 ・やりたいこと <div>で作ったボックス要素すべてにリンクをはる。 その際、hoverでボッ..

えっと・・・boxクラスがHTML側に見当たらないのですが。

boxクラスが無いと適用されないのが正しいです。

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

はてな

もし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>

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

◎質問者からの返答

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

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

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

と記述しました。


2 ● KAIUN
●20ポイント

http://www.livedoor.com/

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を指定したいのです。

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


3 ● TomCat
●20ポイント

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="

http://www.hoge.com">ABCDEFG</a>

</div>

</body>

</html>

divで箱を作ったら、その中に

display: block

で指定したリンクを貼ってやるんです。

上の例では、boxというidで箱を指定して、

その中にクラスとしてのhoverを位置づけています。

◎質問者からの返答

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

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

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

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

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

そうしたいのです…。

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

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


4 ● kgi
●5ポイント

http://www.tohoho-web.com/html/memo/elem.htm

HTMLのタグと要素

まず、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さんの回答が近いのですが…。

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


5 ● oh_tsu
●10ポイント

http://www.zspc.com/documents/css2/selector/hover.html

CSS2対応状況ガイド::hover

リンク参照

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

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

対策方法としては、

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

2JavaScriptで対応する。

ですかね。

◎質問者からの返答

ありがとうございます。

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

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

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

むーん…。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ