やりたかったこと。

隣接した要素で、一方にマウスオーバーすると、
display: none;
にしておいたもう一方の要素を出現させて、
出現させた要素のリンクをクリックできるようにしたい。

CSSで実装する、マウスオーバーで表示される吹き出し

どこのサイトも簡単そうに書いてあり、TECHのカリキュラムでもおかしなことは起こらなかったのだが・・・

chromeで開くとなんかムッチャチラつく。何これ？

色々調べたけど同じことになってる記事を見つけられなかったので、
このhoverの部分だけをhtml,cssに切り出した上でプロパティをどんどん削っていってテストした。

最終的にここまでにしたけど、やっぱり改善せず。ちなみに他のブラウザの動きとして、safariはちょっとチラつく。firefoxはチラつき無し。うん、わかんね。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel='stylesheet' href='./test.css'>
</head>
<body>
  <div class="nickname">名前</div>
  <div class="box"><a href="#">ログアウト</a></div>
</body>
</html>

※　scssは、vseditorにLive Sass Compilerっていうのを入れて、css変換して検証してた。

test.scss

.nickname {
  height: 60px;
  background-color: #f0f0f0;
  &:hover + .box {
    display: block;
  }
}

.box {
  background-color: skyblue;
  display: none;
  position: absolute;
  top: 2em;
  height: 50px;
}

最終的に思い至ったのが（元々、そういう風に書いておくものなのかもしれないが・・・）

nickname要素にのみhoverを適用させた状態だと、nickname要素の範囲からマウスが外れてしまった時にbox要素が消えちゃうじゃん、と思いbox:hover{ display: block; }
を追加したらなんとかなった。

test.scss

.box {
  background-color: skyblue;
  display: none;
  position: absolute;
  top: 69px;
  height: 50px;
  &:hover {
    display: block;
  }
}

ちなみに、topを変えて試してみてたが、
双方の境界部分は、接するか、重ねるかしないとダメ、と思っていたが、
1 pixel離れるのは許容される(1 pixelの隙間にマウスオーバーしてもboxが消えずに済む)ということが分かった！！
どうでもいいけど。

ブラウザ別に動作が変わるだろうから、きっと接するか、重ねるかしとくのが無難なんだろう。