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

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

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

希望这有帮助。

V / R

Answer 2

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

<p>Celebi, the 251</p>

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

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

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

Answer 3

也许这可能会有所帮助！如果您不是在寻找

，请告诉我

JsFiddle

我将CSS更改为：div.text{display:none} div.champ:hover div.text{display:block}

Answer 4

我已经更新了你的小提琴......这就是这个

div.champ p{ visibility: hidden; }

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

updated fiddle

显示悬停图像上的文字

4 个答案: