将鼠标悬停在锚标签内的图像上且锚标签位于div内时，如何使文本显示？

Question

i really need help on this. I looked everywhere in the web and i tried so many different things and nothing worked for me. I'm kind of new in programming and maybe this is a newbie question but please help me. I'm trying to make some text appear below one image whenever i pass the mouse over the image. I managed to do it with some simple code that i found on the web like this:

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>

So, this does the trick but, for my specific case i need the anchor tag to be inside of a div, and as soon as i put the anchor tag inside a div tag it just stops showing the text when i hover the image. Of course I did the changes in CSS like this:

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>

I even tried to add id's and classes to the anchor tag and the div tag to try to reach where i need but i failed. I need your help, what can i do? Thanks guys

Answer 1

Use the jQuery hover function.

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

Here is a fiddle .