質問編集履歴

1 classの綴ミス修正しました。

mon-

mon- score 1

2017/03/18 17:32  投稿

chromeでの:hoverによるdisplay: blockの挙動について
要素Aの上にカーソルが乗ったら要素Bを表示して、
要素Bの上にカーソルが乗ってる間も表示しておくよう、下記のようにしています。
```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で要素Bの上でクリックを繰り返すと消えてしまうことがあります。
他のブラウザ(Firefox,Opera,IE,Edge)でも試してみたのですが、このような現象は起きませんでした。
数回のクリックで消えることもあれば、数十回クリックしてもなかなか消えないこともあり、
どのタイミング、何をキッカケで起こるのか原因が分かりません。
これはChrome側の問題と考えるべきでしょうか?
何か情報お持ちの方おられましたら、ご教授いただけないでしょうか。
Chromeのバージョンは 57.0.2987.110 (64-bit) です。
  • CSS

    7554 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る