mon- score 7
2017/03/18 17:32 投稿
| chromeでの:hoverによるdisplay: blockの挙動について |
| 要素Ａの上にカーソルが乗ったら要素Ｂを表示して、 |
| 要素Ｂの上にカーソルが乗ってる間も表示しておくよう、下記のようにしています。 |
| ```css |
| div.aaa { |
| border: 1px solid #000; |
| } |
| div.bbb { |
| display: none; |
| border: 1px solid #000; |
| } |
| div.aaa:hover + div.bbb { |
| display: block; |
| } |
| div.bbb:hover { |
| display: block; |
| } |
| ``` |
| ```html |
| <div class="aaa">要素A</div> |
| <div clsaa="bbb">要素B</div> |
| <div class="bbb">要素B</div> |
| ``` |
| ただ単にカーソルを乗せるだけなら、期待通りの動作するのですが、 |
| Chromeで要素Ｂの上でクリックを繰り返すと消えてしまうことがあります。 |
| 他のブラウザ(Firefox,Opera,IE,Edge)でも試してみたのですが、このような現象は起きませんでした。 |
| 数回のクリックで消えることもあれば、数十回クリックしてもなかなか消えないこともあり、 |
| どのタイミング、何をキッカケで起こるのか原因が分かりません。 |
| これはChrome側の問題と考えるべきでしょうか？ |
| 何か情報お持ちの方おられましたら、ご教授いただけないでしょうか。 |
| Chromeのバージョンは 57.0.2987.110 (64-bit) です。 |
