2

ユーザーが星の上にカーソルを置いて他のユーザーを評価できる星評価システムを作成しようとしています。

現時点では、CSS の設計面に集中したいと思っています。ユーザーが各画像のcssで不透明度を使用してマウスをホバーしたときに星がフェードインする方法を知っていますが、ユーザーが2番目または3番目の星の上にホバーした場合、前の星も同様になるようにするにはどうすればよいですかそれとフェードイン？

ヒントやアドバイスをいただければ幸いです。以下は、これまでのところ、個別の画像の不透明度を設定するだけのものですが、前述のように機能させる方法を知りたいため、ユーザーが星 3 にカーソルを合わせると星 1、2、3 がフェードインします。

.star {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:0.2;

    }

.star:hover {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:1.0;

    }
4

1 に答える 1

3

私はこのようにします（一般的な兄弟コンビネータを使用~）

<ul class="stars">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

と

.stars li{
    float:left;
    width:20px;
    height:20px;
}
.stars:hover li{
   background-color:red; // or set a background image of SELECTED star
}
.stars li,
.stars li:hover ~ li{
    background-color:#ccc;// or set a background image of unselected star
}

http://jsfiddle.net/gaby/PJWZY/1/のデモ

で遊んできましたbackground-color。同じことが不透明度にも当てはまります。

http://jsfiddle.net/gaby/PJWZY/2/の不透明度デモ

于 2012-12-19T01:05:24.597 に答える