質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

5174閲覧

chromeでcssのhoverがかからない

-1an.vvks-

総合スコア71

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/12 09:18

編集2017/03/13 06:04

###[√] cssのhoverが有効になる場合とならない場合がある

実際の動作を確認する

###[√] code

html

1 2<!DOCTYPE html> 3 4<html> 5 6 <head> 7 <style> 8 *{ 9 box-sizing:border-box; 10 margin:0; 11 padding:0; 12 } 13 body{ 14 margin:10px; 15 } 16 17 .wrap{ 18 box-sizing:content-box; 19 position:relative; 20 width:600px; 21 height:500px; 22 border:1px solid #ddd; 23 margin:100px auto; 24 } 25 .wrap> *{ 26 list-style:none; 27 position:absolute; 28 display:inline-block; 29 border:1px solid #555; 30 } 31 32 .thumb{ 33 width:100px; 34 height:100px; 35 left:0; 36 } 37 .thumb:nth-of-type(1){ 38 top:0; 39 background:azure; 40 } 41 .thumb:nth-of-type(2){ 42 top:100px; 43 background:lightYellow; 44 } 45 .thumb:nth-of-type(3){ 46 top:200px; 47 background:pink; 48 } 49 50 .img{ 51 top:0; 52 right:0; 53 width:500px; 54 height:500px; 55 transition:0.1s; 56 opacity:0; 57 } 58 .img:nth-last-child(4){ 59 background:#eee; 60 opacity:1; 61 } 62 .img:nth-last-child(3){background:azure;} 63 .img:nth-last-child(2){background:lightYellow;} 64 .img:nth-last-child(1){background:pink;} 65 66 #thumb01input, 67 #thumb02input, 68 #thumb03input, 69 #thumb001input, 70 #thumb002input, 71 #thumb003input{display:none;} 72 73 </style> 74 </head> 75 76 <body> 77 78 <h1>demo</h1> 79 80 <hr> 81 82 <h2>css,hover</h2> 83 84 <style> 85 #thumb1:hover ~ #img1, 86 #thumb2:hover ~ #img2, 87 #thumb3:hover ~ #img3{opacity:1;z-index:100;} 88 </style> 89 90 <ul class="wrap"> 91 <li id="thumb1" class="thumb"></li> 92 <li id="thumb2" class="thumb"></li> 93 <li id="thumb3" class="thumb"></li> 94 <li id="img0" class="img"></li> 95 <li id="img1" class="img"></li> 96 <li id="img2" class="img"></li> 97 <li id="img3" class="img"></li> 98 </ul> 99 100 <hr> 101 102 <h2>input,checked</h2> 103 104 <style> 105 #thumb01input:checked ~ #img01, 106 #thumb02input:checked ~ #img02, 107 #thumb03input:checked ~ #img03{opacity:1;z-index:100;} 108 </style> 109 110 <div class="wrap"> 111 <input id="thumb01input" type="radio" name="myradio1"></input> 112 <label for="thumb01input" id="thumb01" class="thumb"></label> 113 <input id="thumb02input" type="radio" name="myradio1"></input> 114 <label for="thumb02input" id="thumb02" class="thumb"></label> 115 <input id="thumb03input" type="radio" name="myradio1"></input> 116 <label for="thumb03input" id="thumb03" class="thumb"></label> 117 <div id="img00" class="img"></div> 118 <div id="img01" class="img"></div> 119 <div id="img02" class="img"></div> 120 <div id="img03" class="img"></div> 121 </div> 122 123 <hr> 124 125 <h2>both</h2> 126 127 <style> 128 #thumb001input:checked ~ #img001, 129 #thumb002input:checked ~ #img002, 130 #thumb003input:checked ~ #img003{opacity:1;z-index:100;} 131 #thumb001input:hover ~ #img001, 132 #thumb002input:hover ~ #img002, 133 #thumb003input:hover ~ #img003{opacity:1;z-index:200;} 134 </style> 135 136 <div class="wrap"> 137 <input id="thumb001input" type="radio" name="myradio2"></input> 138 <label for="thumb001input" id="thumb001" class="thumb"></label> 139 <input id="thumb002input" type="radio" name="myradio2"></input> 140 <label for="thumb002input" id="thumb002" class="thumb"></label> 141 <input id="thumb003input" type="radio" name="myradio2"></input> 142 <label for="thumb003input" id="thumb003" class="thumb"></label> 143 <div id="img000" class="img"></div> 144 <div id="img001" class="img"></div> 145 <div id="img002" class="img"></div> 146 <div id="img003" class="img"></div> 147 </div> 148 149 </body> 150 151</html>

期待される動作:
サムネイルがhover/checkされたら、別窓に拡大表示する

###[√] 問題
bothのサムネイルにhoverした際のcssがすぐに効かない。
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。

Chromeでの表示
(Chromeでの動作)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/03/12 13:47

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
-1an.vvks-

2017/03/12 13:54

すみません。だいぶ手を加えてしまったので、そのまま更新しました。もとのコードはbothのところの#img001などが#img01等になっていました(既に書いたコードをコピペしたため)。
guest

回答2

0

ベストアンサー

そもそもFirefoxでは問題ない。

CSS

1 #thumb001:hover ~ #img001, 2 #thumb002:hover ~ #img002, 3 #thumb003:hover ~ #img003{opacity:1;z-index:200;}

投稿2017/03/12 15:04

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

-1an.vvks-

2017/03/13 06:08

本当ですね.FFでは問題なく動作しているようです. なぜChromeではうまく動作しないのでしょう.
kei344

2017/03/13 06:39

詳しく解説していませんでしたが、そもそも非表示の要素へのhoverではなくラベルのほうにhoverを当てれば動くのでは?という回答です。
-1an.vvks-

2017/03/13 08:41

うわあ、本当だ。 うっかりinputにhoverあてていました。 コピペって怖いですね。 全く気付かなかった… orz
-1an.vvks-

2017/03/13 08:48 編集

あれ?そしたら逆に、 何でlabelがhoverされたみたいな挙動ができてしまっていたんでしょう? inputにhoverしていないのだから、hoverが全く効かない!という状況になるほうが自然に感じるのですが…
kei344

2017/03/13 10:55

詳しい実装は知りませんが、label要素の「for」をどう考えるかの違いな気はします。
guest

0

投稿2017/03/12 11:15

toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

-1an.vvks-

2017/03/13 06:07

同じIDがあったのはコピペしていたせいですので修正しました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問