Q&A
「clsaa="bbb"」になっていますよ。
要素Ａの上にカーソルが乗ったら要素Ｂを表示して、
要素Ｂの上にカーソルが乗ってる間も表示しておくよう、下記のようにしています。
css
1div.aaa { 2 border: 1px solid #000; 3} 4div.bbb { 5 display: none; 6 border: 1px solid #000; 7} 8div.aaa:hover + div.bbb { 9 display: block; 10} 11div.bbb:hover { 12 display: block; 13}
html
1<div class="aaa">要素A</div> 2<div class="bbb">要素B</div>
ただ単にカーソルを乗せるだけなら、期待通りの動作するのですが、
Chromeで要素Ｂの上でクリックを繰り返すと消えてしまうことがあります。
他のブラウザ(Firefox,Opera,IE,Edge)でも試してみたのですが、このような現象は起きませんでした。
数回のクリックで消えることもあれば、数十回クリックしてもなかなか消えないこともあり、
どのタイミング、何をキッカケで起こるのか原因が分かりません。
これはChrome側の問題と考えるべきでしょうか？
何か情報お持ちの方おられましたら、ご教授いただけないでしょうか。
Chromeのバージョンは 57.0.2987.110 (64-bit) です。
回答2件
0
ベストアンサー
問題が再現しませんでした。（Windows環境）
動くサンプル：https://jsfiddle.net/kcd5ehrt/
上記サンプルで再現するのであれば、ブラウザをシークレットウインドウなどで実行してみて拡張などの影響が無いか確認してみてください。
投稿2017/03/18 08:05
総合スコア69398
アドバイスありがとうございます。
サンプルで試してみましたが、発生頻度は低いですがやはり症状が出ました。
拡張すべて無効にしたりして試してもみましたが、やはりだめでした。
https://gyazo.com/39cee46ad725d3c499d4c2671f368771
こちらの環境もなにか関係してるんでしょうか・・・
今手元にこのPCしかないので、また別のPCからも確認してみます。
このサンプルで確認しています。
Chrome ではクリックでなく、要素Bでマウスダウンして、要素Aへカーソルを移動すると消えますね。
クリックしてるだけのつもりで実はカーソルが移動しているとかないでしょうか。
コメントありがとうございます。
実際には要素Bはそれなりの高さを持たせてます。
要素Ｂに高さを持たせ、要素Ａから離れた場所で試してもやはりだめでした。
といいますか、症状出やすくなった気がします。
https://gyazo.com/f8d7a3a2d41d5716f593e8116c41e777
おきないですねー
win7/win10/56/57/32bit/64bitいろいろやってみましたがクリックするだけで消えるのはなかったです
gyazoキャプのマウスカーソルからwindowsかと思いますが、一応linuxもやってみましたが消えなかったです
シークレットモードでも発生するなら常駐ソフトとかの影響？
いろいろ試して頂きありがとうございます。
別PCが用意できたので試してみたのですがやはりだめでした。
どちらもWin10にChrome 57.0.2987.110 (64-bit)です。
用意したPCには余計な常駐ソフト等も入っておらず、Chromeも新規インストールしました。
この現象が気になりだしたのがここ最近なんです。
今までただ気付いてなかっただけかと思ってましたが、
ここ数日の間にChromeがバージョンアップしてるのがどうも気になって、
旧バージョン56.0.2924.87 (64-bit)を入れて試してみたところ、まったく問題ありませんでした。
直前のバージョンは入手法が分からず、試せてないので最新バージョンの問題なのか・・・
ただ、いろいろ試して頂いても問題おこらないようなので、＋αこちらの環境にも何か問題あるのか・・・
はっきりとした原因特定はできませんでした。
> Win10にChrome 57.0.2987.110 (64-bit)
コレと同じのをもう一回やってみました
百回程度感覚を短くや長くクリックしても起きないです
他PCでも再現して常駐もないなら原因なんなんでしょう
度々ありがとうございます。
友人にも試してもらったところ、Win10+Chrome 57.0.2987.110 (64-bit)の同環境で再現できたとのことでした。
実際には要素Ｂの中にはcheckboxを並べてあり、それをクリックしてると発症します。
https://jsfiddle.net/o8kazrhn/1/
https://gyazo.com/f3c23ef244089b766f0e7318f7effea7
どこに原因があるのか、ホント不思議です。
手元環境ではいずれも再現しませんでした。（私の試し方に問題がある可能性もあります）
ちなみに JavaScript で mouseover を検知する場合も起きますか？
https://jsfiddle.net/o8kazrhn/3/
また、フィードバックを送れば解決されるかもしれません。
【Chrome で問題を報告する、フィードバックを送信する - Chrome ヘルプ】
https://support.google.com/chrome/answer/95315?hl=ja
また別のPCをwin10+chrome57(64bit)にしてみるとこっちだと再現しました
10回に一回くらいで起きますね
起きないPCは全く起きないです
kei344 様
javascript動作では全く問題なく機能します。
実は以前はjavascriptで処理していました。
同じことをCSSのみで出来ることを知ってから、この方法に変更してました。
しかしここ最近になって、Chromeでの挙動のおかしさに気づき、
原因も特定できなかったので今回質問した次第です。
今のところ閲覧者からの指摘もないのでしばらく様子を見て、
Chromeの次期バージョンでも起こるようであれば、問題報告しようと思います。
ありがとうございました。
lazex 様
何度も検証して頂き、ありがとうございます。
再現できたようで、なんか少しホッとしてしまいました。
現象が起こるPCと起こらないPCで一体何が違うんでしょうかね？
自分も何度も試してて、しばらく現象が起きなかったりすることもあったりでホント謎です。
あなたの回答
tips
プレビュー
