將鼠標懸停在錨標簽內的圖像上且錨標簽位於div內時，如何使文本顯示？

Question

我真的需要幫助。 我在網上無處不在，嘗試了很多不同的東西，但對我來說卻無濟於事。 我是編程方面的新手，也許這是一個新手問題，但請幫助我。 每當我將鼠標移到圖像上方時，我都試圖使某些文本出現在圖像下方。 我設法用一些在網上找到的簡單代碼來做到這一點，例如：

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>

我什至嘗試將id和class添加到anchor標簽和div標簽中，以嘗試到達我需要的位置，但失敗了。 我需要您的幫助，我該怎么辦？ 多謝你們

Answer 1

使用jQuery 懸停功能。

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

這是一個小提琴 。