javascript - 在悬停图像上显示文本

Question

在我的代码中，我使用的脚本生成一组随机的 4 张图像，这些图像在刷新时显示。我希望只在光标悬停在相应图像上时显示文本。

关于使用 CSS 执行此操作的任何指示？我不确定将悬停元素放在哪里。 http://jsfiddle.net/sugarcraving/Af72K/1/

Javascript

$(document).ready(function() {
$(".champ").hide();

var elements = $(".champ");
var elementCount = elements.size();
var elementsToShow = 4;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
    var rand = Math.floor(Math.random() * elementCount);
    if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
        alreadyChoosen += rand + ",";
        elements.eq(rand).show();
        ++i;
    }
}
});

CSS

div.champ { 
display: none; 
float: left;
color: red;
}

Answer 1

按照 Rouse02 所说的，在您要隐藏/显示的上下文周围添加一些内容。

<p>Celebi, the 251</p>

然后在您的 css 中，隐藏内容并仅在您将鼠标悬停在 div 上时显示它(您也可以在图像悬停时执行此操作)。

p {
    visibility:hidden;
}
.champ:hover p {
    visibility:visible;
}

演示:http://jsfiddle.net/bzTnR/1/