css hiddenとvisibleを組み合わせて、表示非表示を切り替える

通常時、文字が非表示。
マウスを乗せたとき文字を表示させるため、以下のようなcssを設定しました

.answer {
visibility: hidden;
}
.answer:hover {
visibility: visible ! important;
}

しかし常に非表示にされ、マウスを乗せても表示されません
なにがいけないのでしょうか？

質問者からの補足コメント

• visibility: visible!important;
  と書き換えてみましたが、効果なく、表示されないままです

  No.1の回答に寄せられた補足コメントです。 補足日時：2017/09/02 10:36

No.1 回答者： perolist 回答日時： 2017/09/02 09:05

ビックリマークの後ろのホワイトスペースを取ってみてはどうでしょう。

No.2 回答者： MinervaAlice 回答日時： 2017/09/02 11:33

理屈的には、そこには文字があるけど、hiddenで見えないだけと思いがちですが、

ブラウザ的には、表示がないところは何も無いと思ってください。
何も無いところにカーソルを当てたりはできませんよね。

No.3 回答者： t_fumiaki 回答日時： 2017/09/02 14:10

自分自身の文字とかタグとかを無かったり/有ったりは出来ません。

タグの属性を変更するとか、隣にある文字をとかは出来ます。

いくらブラウザでも再描画せずにタグを有ったり、無かったりさせる事は無理です。

文字色を変更したら如何ですか。白（背景色と同じ）/黒、で切り替える。
これは属性変更なので可能です。

例
.answer {
color: #ffffff;
}
.answer:hover {
color: #333;
}


<p class="answer">文字の表示/非表示</p>

No.4 ベストアンサー 回答者： Ogre7077 回答日時： 2017/09/02 14:54

:hover 対象要素の子孫に対して、表示を切り替えましょう

<style>
.answer p { visibility:hidden; }
.answer:hover p { visibility:visible; }
</style>
<section class=answer>
<p>通常時は非表示の文字</p>
</section>