hoverが効かない範囲

Question

試しに以下のようなコードを書いてみたところ文章がない位置をタッチするとhoverが働いていないことがわかりました。

これは仕様ですか？

<div ontouchstart="">
タッチしてね
</div>

div:hover {
  height:100px;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}

これ以外は全く記述していません。
（文章があるところをクリックするとhoverが働くのでCSSとの紐付けはできています）

Answer 1

文章がない部分でも効いています。
文章の右側をhoverしてみてください。

要はheightがhover時に指定されているため、そのように感じるのです。
おそらく

  div {
    height: 100px;
  }
  div:hover {
    box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
  }

といったとこでしょうか？