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内时，如何显示文本？

1 个答案: