2

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

4 回答 4

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

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

希望这可以帮助。

视听/视听

于 2013-07-12T16:28:49.483 回答
0

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

<p>Celebi, the 251</p>

然后在你的css中，隐藏内容并且只在你将鼠标悬停在div上时才显示它（你也可以在图像悬停时这样做）。

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

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

于 2013-07-12T16:48:13.800 回答
0

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

提琴手

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

于 2013-07-12T16:55:42.800 回答
0

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

div.champ p{ visibility: hidden; }

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

更新的小提琴

于 2013-07-12T17:33:29.377 回答