0

jquery スライダー vfm-slider と rating-slider のそれぞれに異なる背景画像を割り当てたいと考えています。

ここにコードがあります

<div id="slider-content"> 
    <span>VFM</span>
    <div class="vfm-slider"></div>
    <input type="text" class="slider-value"/>
    <div style="clear:both"></div> <span>Heart</span>
    <div class="rating-slider"></div>
    <input type="text" class="slider-value"  />
</div>

.ui-slider .ui-slider-handle  {
    background : url(http://findicons.com/files/icons/2015/24x24_free_application/24/heart.png) no-repeat scroll 50% 50% ;
    border:none;
    #content:"$";
    margin-top: -7px;
    #margin-left: 10px;
    font-size: 1.5em

}

http://jsfiddle.net/tven/JFdQs/

どうすればこれを達成できますか? 私は一般的にjqueryとcssに慣れていません。これは、css クラスのネストにとって非常に直感的な側面かもしれませんが、今は頭を包むことができません。どんな助けでも大歓迎です。

クラス名 .vfm-slider を .ui-slider および .ui-slider-handle クラスと組み合わせて使用​​しようとしました。しかし、後者の 2 つを前者の下にネストする必要があります。もちろん、それは不可能です。

4

1 に答える 1

0

別のルールを使用します。

.vfm-slider.ui-slider .ui-slider-handle{
  background : url(heart.png) no-repeat scroll 50% 50%;
}
.rating-slider.ui-slider .ui-slider-handle{
  background : url(rating-image.png) no-repeat scroll 50% 50%
}

jsfiddle の例を更新しましたが、そこで動作します: http://tinyurl.com/a67nw67

于 2013-02-26T06:27:29.030 に答える