将鼠标悬停在锚标记内且锚标记位于 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 和类添加到锚标记和 div 标记以尝试到达我需要的位置，但我失败了。我需要你的帮助，我能做什么？谢谢大家

Answer 1

使用 jQuery hover 函数。

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

这里是fiddle.

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

How to make text appear when hovering over an image that's inside an anchor tag and the anchor tag is inside a div?

html

tags

anchor

image

hover