jQueryで要素のホバー時にコメントを表示するやりかた

Question

いつもお世話になってます。

質問は表題のとおりです。

各liのホバー時にその直下にあるコメントを表示したいです。

コードは下記になります。

<div class="faq_center">
<ul>

<li>
<h4><img src="#"></h4>
<p>コメント1</p>
</li>
<li>
<h4><img src="#"></h4>
<p>コメント2</p>
</li>
<li>
<h4><img src="#"></h4>
<p>コメント3</p>
</li>
<li>
<h4><img src="#"></h4>
<p>コメント4</p>
</li>
					
</ul>
</div>

liが4つあるので、そのliのホバー時にその直下のコメントだけを表示したいです。
ホバーが外れた時は、非表示に戻したいです。

その他必要情報がありましたら追記いたしますのでおっしゃってください。

宜しくお願いします。

追記です。

失礼しました！最初は非表示になっています。
cssは下記です！

.faq_center ul li p {
    width: 245px;
    padding: 30px 0 0 75px;
    text-align: justify;
    display: none;

宜しくお願いします。

Comments

[退会済みユーザー]

提示のコードだとそもそも、コメントは表示されているはずです。初期時に隠しているのでしたら、それに該当するコードも合わせて提示してください。

[m.ts10806]

自身が組んだコード、調べた内容。　>その他必要情報　　　これではjQueryという要件ながら何一つjQuery組んでいませんし。何も調べてないのでしょうか。

[m.ts10806]

「そもそもそれがどういう名前の機能なのか分からない」というのでしたらヒントを。[ tooltip ]で検索。

[m.ts10806]

ところでjQueryは？関係ないのならタグ・タイトルから外してください。CSS、htmlだけで良いです。

[m.ts10806]

提示のCSSも閉じられていない不完全なものですし。

[yoshinavi]

装飾が要らなければ、title属性ではどうでしょうか？

Answer 1

スタイルシートでよくないですか？

.faq_center h4:not(:hover)+p{display:none};
.faq_center h4:hover+p{display:block;};

※よくかんがえたら:hover指定の方はいらないですね

.faq_center h4:not(:hover)+p{display:none};

のみでOK