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 类结合使用。但是我必须将后两个嵌套在前者之下。那当然是不可能的。

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 回答