html - アンカータグ内にあり、アンカータグがdiv内にある画像にカーソルを合わせるとテキストが表示されるようにするにはどうすればよいですか?

原文 html image tags hover anchor

私はこれについて本当に助けが必要です。私はウェブのあちこちを見て、色々なことを試しましたが、何もうまくいきませんでした。私はプログラミングの初心者で、これは初心者の質問かもしれませんが、私を助けてください。画像の上にマウスを置くと、1つの画像の下にテキストが表示されるようにしています。
私は次のように私がウェブ上で見つけたいくつかの簡単なコードでそれをどうにかして行いました:

CSS

.show {
    display: none;
    border: 1px solid black;
}

a:hover + .show {display: block;}


HTML

<a><img src="../auxiliar/miniatura-2-inactivo.jpg" width="331"      height="331" onmouseover="this.src='../auxiliar/miniatura-2.jpg'" width="331" height="331" onmouseout="this.src='../auxiliar/miniatura-2-inactivo.jpg'" /></a> 

<div class="show">Stuff shown on hover</div>


つまり、これでうまくいきますが、私の特定のケースでは、アンカータグをdiv内に配置する必要があります。アンカータグをdivタグ内に配置すると、画像にカーソルを合わせるとテキストが表示されなくなります。もちろん、CSSで次のように変更しました。

CSS

.show {
    display: none;
    border: 1px solid black;
}

    div a:hover + .show {
    display: block;
}


HTML

<div>
<a ><img src="../auxiliar/miniatura-2-inactivo.jpg" width="331" height="331"  onmouseover="this.src='../auxiliar/miniatura-2.jpg'" width="331" height="331" onmouseout="this.src='../auxiliar/miniatura-2-inactivo.jpg'" /></a>
</div> 

<div class="show">Stuff shown on hover</div>


アンカータグとdivタグにIDとクラスを追加して、必要な場所に到達しようとしましたが、失敗しました。私はあなたの助けが必要です、私は何ができますか?みんなありがとう
答え
jQuery hover関数を使用します。

$('#image').hover(function() {
        $('#text').show();
    }, function() {
        $('#text').hide();
});


これがfiddleです。
関連記事

java - Javaのwebsocketを介した特定のユーザーとのWebチャット

c# - C#でmshtmlを使用して、ドキュメントの最初のフォームで最初の入力タイプテキストの値を設定する方法

html - (のみ)CSSでブラウザの幅ピクセルと高さピクセルを見つける

php - divタグで更新できますか

javascript - HTML5のドラッグアンドドロップが子をターゲットにするのはなぜですか? (選べるリスト)

javascript - すべてを選択するjqueryセレクター

javascript - ページの位置に応じてテキストの文字を強調表示する

javascript - 一定の時間のワードプレス後にカスタムフィールドを変更する

javascript - divタグ内でのjavascript / jquery関数の呼び出し

html - HTMLでのオートフォーカスの奇妙な動作