IE7でのhoverについて

2023/10/16 03:25

このQ&Aのポイント

IE7からhoverがa以外の要素にも適用できるようになったという情報を見たのですが、IE7では機能しないような何かマズイ記述方法をしてしまっているのでしょうか？
IE7でのhoverの問題について質問です。IE7からはhoverがa以外の要素にも適用できるようになったという情報を見ましたが、以下の記述だとhoverが機能しませんでした。
IE7でのhoverに関して質問があります。IE7からはhoverがa以外の要素にも適用できるようになったという情報を見たのですが、記述方法に何か問題があるのでしょうか？

ベストアンサー

IE7でのhoverについて

2009/01/24 18:54

IE7からhoverがa以外の要素にも適用できるようになったという情報を見たのですが以下のような記述だとhoverが機能しませんでした。（Firefoxでは以下の記述で機能しました） <html> <head> <style type="text/css"> .test {width: 120px; height: 120px; background-color: #FFFFFF;} div.test:hover {background-color: #FF0000;} </style> </head> <body> … <div class="test"> 文章がここに書いてあります。 </div> … </body> </html> IE7では機能しないような何かマズイ記述方法をしてしまっているのでしょうか？ちなみにサイトの仕様上htmlの構造はいじることができません。足りない部分は別途補足させて頂きますのでご教授の程よろしくお願いします。

sachi-999
お礼率96% (186/192)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2009/01/24 20:18 回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> にて動作可能です。

質問者

お礼 2009/01/25 00:38

naokita様回答頂きましてありがとうございます。おかげで謎が解けました。

関連するQ&A

このcssをIEで見ると？
お世話になります。下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。クロム　IE　ファイヤーフォックス似て確認。なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style>  </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
css　hover　ie6
いつもお世話になってます。宜しくお願い致します。クロム、firefox、オペラ、サファリ、IE7、IE8ですと、正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。以下、コードです。  <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body>  body { font-family:"ＭＳゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- CSS
IE6バグ　css　hover
いつもお世話になってます。宜しくお願い致します。クロム、firefox、オペラ、サファリ、IE7、IE8ですと、正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
ホームページ作成スタイルシートを使用して画面を３分割したい。
ホームページ作成スタイルシートを使用して画面を３分割したい。下のようなソースを作成しました。 head と body と foot に画面を３分割してます。 footを高さ30pxにしてますが、これをウィンドウの一番下にくっつけて画面解像度、ウィンドウサイズを変更してもhead部分は一番上へfoot部分は一番下に表示したいと思ってます。どのような指定をすれば出来ますでしょうか？ご教授願いします。 -------------------------------------------------- <html> <head> <style> * { padding: 0; margin: 0; } #head { height: 100px; width: 100%; background-color: #FFFF00; } #body { width: 100%; } #foot { height: 30px; background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div id="head"> タイトル </div> <div id="body"> テストページ </div> <div id="foot"> copyright(c) </div> </body> </html>
- ベストアンサー
- CSS
a:hover時のみ、divの背景を変えたい
index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、 <html> <head> <style type="text/css"> div{ background-color: #CCCCCC; width: 100px; height: 100px; opacity: 0.5; filter: alpha( opacity=50 );　/* IE */ } a:hover{ opacity: 1; filter: alpha( opacity=100 );　/* IE */ } </style> </head> <body> <div><a>リンク</a></div> </body> </html> div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。
- ベストアンサー
- CSS
ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF }  </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
ＩＥ８でのＣＳＳについて
formの領域内に可変のdivと固定のdivの領域を指定したいのですがうまくいきません。 ※formの領域が1000pxだとした場合に下のdivが300のため上のdivは残りの700の50%で350pxにしたいです。２つのdivは異なる親タグにしなければならないのでしょか？ <html> <body> <form method="POST" action="" style="height:100%"> <div style="height:50%;background-color:red"></div> <div style="height:300px;background-color:blue"></div> </form> </body> </html>
- 締切済み
- CSS
position:relativeについて教えてください
初めて質問します。２つの横にならんだセルをDIVによって表示しようと思い <DIV style="width:112px;height:20px;background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="width:112px;height:20px;background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。 <DIV style="width:112px;height:20px;"> <DIV style="background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> 同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、 <DIV style="width:112px;height:20px;position:relative;"> <DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV> この記述だと、セルが下にくっついてしまい、うまく表示できません。 positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが… 解決方法がわかる方いらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML