ベストアンサー

:hover imgとimg:hoverの違いは？

2015/01/02 10:01

下記CSSの違いを教えてください .test:hover img {} .test img:hover {}

re97
お礼率80% (601/744)

CSS
回答数1
ありがとう数7

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

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

ベストアンサー

ONEONE
ベストアンサー率48% (279/575)

2015/01/03 20:43 回答No.1

.test:hover img {} testクラスの領域にマウスが入っているときのtestクラス内のimgに対するスタイル ※マウスがtestクラス内であってimgの外でもimgに対してスタイルが適用されます。 .test img:hover {} testクラス内のimg内にマウスが入っているときのimgに対するスタイル

質問者

お礼 2015/01/13 13:30

回答ありがとうございました。大変参考になりましたー

関連するQ&A

a:hover img.●●について

お問い合わせフォームの送信ボタンを画像にして、ロールオーバーイメージ風に画像ボタンにカーソルを合わせると光るようにしたいのですが、うまくいきません。ご教示いただけたら、助かります。【以下cssタグ】 a:hover img.over { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; } 【以下htmlタグ】 <div class="over"> <p><input type="image" src="http://●●/images/button.gif" alt="送信する" width="177" height="42"></p></div>
a:hoverの下線指定が反映されない

htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。 <style type="text/css">  当方初心者でして詳しい方にご教授いただきたいです。宜しくお願いいたします。
IE7でのhoverについて

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の構造はいじることができません。足りない部分は別途補足させて頂きますのでご教授の程よろしくお願いします。
１番右側の画像のhoverだけ位置をずらしたい

テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。 http://okwave.jp/qa/q6343605.html ↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。現在設定しているのは下記のコードです。どなたかご教授下さい。【html】 <tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td> </a></td> </tr> 【css】 td.type1 { height: 185px; width: 185px; background-color:#FFF; } a#hover img{ border:none; padding:5px; width:100px; height:100px; border: 1px solid #CCC; } a#hover{ display:block; width:100px; height:100px; } a#hover:hover img{ width:300px; height:300px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF; } ちなみにtdが４つ入ります。（画像は横に４つ入り、一番右側というのは４番目になります）
a:hoverの重さ

こんにちは。マウスを乗せたときに背景色を変えることもできる為、重宝しているＣＳＳのa:hoverなのですが、とても重いのです。マウスを乗せたときに背景色を変える処理を行っているのですが、マウスを乗せた途端、CPU使用率が９０％を超え、格段にスピードが落ちます。しかし、文字色を変える処理だとスムーズに動くのです。さらに背景色を変える処理も、ホームページによってはスムーズに動く。この違いが全く分かりません。この現象の原因、出来れば解決策まで教えてください。
リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。

テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。どうやったら、切り分けられますでしょうか。現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。どなたかご助言よろしくお願いします。
ホームページのhover部分の印刷について

ホームページの画像の部分をhoverを使って、画像切り替えしているところがあります。当然、その部分は印刷されないのですが、hoverなしの画像の状態で印刷したいと思っております。このような場合、どのような処理にすれば、screen上ではhoverがきき、印刷もされるように出来るのでしょうか。以下は現在のソースです【HTML】 <div class="header"> <a href="./" id="hogehoge">Top</a> </div> 【CSS】 a#hogehoge { display: block; width: 900px; height: 210px; text-indent: -1000px; background-image: url("../images/main/img_header.jpg"); } a#hogehoge:hover { background-position: bottom left; }
A:hover { color:red;background-color:yellow }

外部ファイルのＣＳＳの一部に下記があります。 A:hover { color:red;background-color:yellow } ある特定の文字の部分のhoverだけ yellowではなく　#FFCCCC　などの色に変えたいときの方法についてアドバイスいただけないでしょうか。文字の色を変えるのはできるもののhoverの色になるとよくわからず・・。
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; }
hoverとmouseoverを連動させるには？

お世話になります。リンクテキストにはスタイルシートでhover設定を行い、gifにはonMouseOverで別の色のgifを読み込ませています。 onMouseOverイベント時にはリンクのhoverがちゃんと行われるのですが、テキスト側にマウスを当てた時、gifのonMouseOverが発生するように（連動してgifの色が変わるように）するにはどのようにしたらよろしいのでしょうか？ソースの一部を乗せます <A HREF="help.html"><IMG SRC="img/bul1.gif" BORDER="0" onMouseOver="this .src='img/bul2.gif'"onMouseOut="this .src='img/bul1.gif'" ALIGN="LEFT"> リンクテキスト</A></FONT> よろしくお願いします。
:hoverで枠内どこに合わせても文字色が変わる

画像のようなメニューを作りたいと思っています。下記のように記述すると <li>に:hoverをつけ、カーソルを合わせると<li>内の枠線下の部分と<li>内の背景色は変わりますが文字に関しては文字の上にカーソルを合わせないと文字色は変わりません。 <li>Yahoo!</li>、枠線内であれば文字が入っていない部分にカーソルを合わせても、枠線下の部分、背景色、文字色全て変える為にはどのように記述すればよいですか？少し意味がわかりづらいかと思いますが、お分かりの方いらっしゃいましたら教えて下さい。宜しくお願いいたします。【HTML】 <nav> <ul> <li><a href="#">Yahoo!</a></li> <li>……</li> <li>……</li> </ul> 【CSS】 nav ul li:hover{ background-color: yellow; border-bottom: 5px; } nav ul li a:hover{ color:blue; }
cssのimgに2つ設定。

cssのimgに2つ設定。 img {border: 0;} img{border: 0; ertical-align:bottom} この2つを使い分けしたいのですが可能でしょうか？ img以外の名前にするとやはり無理でしょうか。
imgタグについて

imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。ですが、html的に<img2～というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？もし他に方法がございましたら教えてください。【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" />コピー<div class="guide-line"></div> </td> </tr> </table>
特定の画像リンクだけhover時の文字色を変更

特定の画像リンクにだけスタイルを適用したいと思っています。特定の画像リンクにクラス名“diet”と付けて、そのリンクにだけ hover 時の文字の色を赤色にしようと考えています。その場合の記述の仕方を教えてください。次のように記述しているのですが、うまくいきません。 HTMLに直接書き込む方法にしています。 <head> <style type=”text/css”> <!- a.diet :hover {color: red;} -> </style> </head> <body> <a href="アドレス"><img src=画像のアドレス></a> </body> （必要なところだけ抜粋しています）どこが間違っているのでしょうか？何度やってもうまくいません。クラスの書き方がよくないのでしょうか？できれば、HTMLに直接書き込む場合と、CSSを利用する場合の、２つの書き方を教えてください。どうぞよろしくお願いします。
IEで#id:hoverや.class:hover

IEで#id:hoverや.class:hoverを実現できませんでしょうか。
IEとFirefoxでリンクの「hover」の状態が異なります。

IEとFirefoxでリンクの「hover」の状態が異なります。メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。画像をテキストに変更すると、テキスト全体にきちんとかかります。画像に問題があるのでしょうか？どうすれば解決するのか教えてください。以下にメニューのソースを載せておきます。（HTML） <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> （CSS） a:hover { background-color: #000000;} どうぞよろしくお願いします。
ｃｓｓを使って何も無いところにマウスが来た際（hover時）に画像が出

ｃｓｓを使って何も無いところにマウスが来た際（hover時）に画像が出るようにしたいのですが、ご存知方いましたら、教えて下さい。
画像配置のimgタグとbackgroundの違い

画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、タイトルの画像はimgタグとbackgroundのどちらでしょうか？他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。
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; }
ＣＳＳファイルの＃とか：とか．とかについて

ホームページの作成について勉強しているのですが、外部ＣＳＳファイルを見ると、例えば、 a.noborder:visited { 　　とか img#logo1 { 　　とか a:hover img.hoverimg　{ いろいろ書き方があり、え？これはどういう意味なんだろうか、と悩み中です。どれが正しいというわけではないんだろうと思いますが、ＣＳＳを書く際に、どれが一番適していますか？

:hover imgとimg:hoverの違いは？

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

お礼 2015/01/13 13:30

関連するQ&A

a:hover img.●●について

a:hoverの下線指定が反映されない

IE7でのhoverについて

１番右側の画像のhoverだけ位置をずらしたい

a:hoverの重さ

リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。

ホームページのhover部分の印刷について

A:hover { color:red;background-color:yellow }

css　hover　ie6

hoverとmouseoverを連動させるには？

:hoverで枠内どこに合わせても文字色が変わる

cssのimgに2つ設定。

imgタグについて

特定の画像リンクだけhover時の文字色を変更

IEで#id:hoverや.class:hover

IEとFirefoxでリンクの「hover」の状態が異なります。

ｃｓｓを使って何も無いところにマウスが来た際（hover時）に画像が出

画像配置のimgタグとbackgroundの違い

IE6バグ　css　hover

ＣＳＳファイルの＃とか：とか．とかについて

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

:hover imgとimg:hoverの違いは？

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

お礼 2015/01/13 13:30

関連するQ&A

a:hover img.●●について

a:hoverの下線指定が反映されない

IE7でのhoverについて

１番右側の画像のhoverだけ位置をずらしたい

a:hoverの重さ

リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。

ホームページのhover部分の印刷について

A:hover { color:red;background-color:yellow }

css hover ie6

hoverとmouseoverを連動させるには？

:hoverで枠内どこに合わせても文字色が変わる

cssのimgに2つ設定。

imgタグについて

特定の画像リンクだけhover時の文字色を変更

IEで#id:hoverや.class:hover

IEとFirefoxでリンクの「hover」の状態が異なります。

ｃｓｓを使って何も無いところにマウスが来た際（hover時）に画像が出

画像配置のimgタグとbackgroundの違い

IE6バグ css hover

ＣＳＳファイルの＃とか：とか．とかについて

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

css　hover　ie6

IE6バグ　css　hover

カテゴリ
一覧

専門家に質問してみよう
専門家登録