0

平均評価結果 (1 から 5 までのランダム生成番号と 10 から 55 までのランダム生成番号) に応じて、評価スターを常にホバリングさせる方法を知っていますか? スターで jQuery を使用してホバーをシミュレートできますか? 同様の問題に対する解決策はほとんど見られませんでしたが、css で General Sibling Selector (~) を使用しているものはありませんでした。

スター ホバー機能は純粋な CSS である必要があります。他のすべてのものは、js(jQuery) にあります。ドキュメントが読み込まれると、いくつかの星がすでにホバリングしている必要があります (乱数の平均値に基づいて)。ユーザーが星をクリックすると、ホバリングしている星にも新しい値が影響するはずです。

ここに私の問題を示すjsフィドルがあります：http://jsfiddle.net/kingSlayer/8ZbxB/

CSS

div.rating-star{
   display:inline-block;
   width:30px;
   height:30px;
   background-image: url(star.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

div:hover div.rating-star {
   background-image: url(star-hover.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

div.rating-star:hover ~ div.rating-star {
   background-image: url(star.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

HTML

<div id="showRating"></div>

<div class="rate_stars">
   <div id="one" class='rating-star' onclick="rating(1);"></div>
   <div id="two" class='rating-star' onclick="rating(2);"></div>
   <div id="three" class='rating-star' onclick="rating(3);"></div>
   <div id="four" class='rating-star' onclick="rating(4);"></div>
   <div id="five" class='rating-star' onclick="rating(5);"></div>
</div>

JavaScript

var averageRate = (Math.random() * 4) + 1;
$('#showRating').text('Average rating: ' + averageRate.toFixed(1));


var numberOfRates = Math.floor((Math.random() * 55) + 1);

function rating(rate) {

    var result = ((averageRate * numberOfRates) + rate) / (numberOfRates + 1);

    $('#showRating').text('Average rating: ' + result.toFixed(1));
}


if (result <= 1.4) {

}
if (result > 1.4 && result <= 2.4) {

}
if (result > 2.4 && result <= 3.4) {

}
if (result > 3 && result <= 4.4) {


}
if (result > 4.4) {

}
4

1 に答える 1

1

最も簡単な方法は、JavaScript を使用してホバーを検出し、ホバーのイン/アウト時に「ホバー」または「アクティブ」クラスを追加/削除することです。CSS は、.rating-star.hoverの代わりに または 同様のものを使用でき:hoverます。このように、JavaScript を使用して、選択したクラスを適切な数の星に適用することができます。

泥のように透明？

于 2013-07-26T14:10:45.443 に答える