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

多分これが役立つかもしれません！これがあなたが探していたものでなかったら教えてください

Jsフィドル

CSSを次のように変更しました：div.text{display:none} div.champ:hover div.text{display:block}

于 2013-07-12T16:55:42.800 に答える
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

私はあなたのフィドルを更新しました..ここで..これを試してください

div.champ p{ visibility: hidden; }

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

更新されたフィドル

于 2013-07-12T17:33:29.377 に答える