在悬停图像上显示文本答案

【问题标题】：Revealing text on hover image在悬停图像上显示文本
【发布时间】：2013-07-11 06:22:00
【问题描述】：

使用我的代码，我正在使用一个脚本，该脚本生成一组随机的 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;
}

【问题讨论】：

您可以参考this question，这似乎与您想要的非常接近。

标签： javascript css image text hover

【解决方案1】：

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

<p>Celebi, the 251</p>

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

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

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

【讨论】：

【解决方案2】：

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

其中 p 是 div 中包含文本的元素。

希望这会有所帮助。

V/R

【讨论】：

这似乎不起作用。我认为问题是使用图像标签？ jsfiddle.net/sugarcraving/5raR3
哎呀，我忘了先隐藏<p>。我的错。

【解决方案3】：

也许这会有所帮助！如果这不是您要找的，请告诉我

JsFiddle

我把 CSS 改成这样：div.text{display:none} div.champ:hover div.text{display:block}

【讨论】：

【解决方案4】：

我已经更新了你的小提琴..这里..试试这个

div.champ p{ visibility: hidden; }

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

updated fiddle

【讨论】：