Question

我正在使用jquery滑块并尝试覆盖其样式。在doc中，有人应该覆盖某些类的样式，比如ui-slider-hander以及其他类来获得结果。我这样做了，但看起来它适用于jquery 1.9但不适用于更高版本。这有什么理由吗？或者在这种情况下我应该采取不同的行动

以下是我使用的滑块：

JS

$("#deplace" ).slider({
            animate: true,
            range: "min",
            value: 5,
            min: 0,
            max: 50,
            step: 5,
            slide: function(event, ui) {
                $('#deplace a').html('<label>'+ ui.value +' </label>');
              }
});

HTML

<div id="deplace" >
  <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-hover" href="#" id="a_deplace">
  </a>
</div>

的CSS：

.ui-widget-content {
  border: 1px solid #bdc3c7;
  background: #e1e1e1;
  color: #222222;
  margin-top: 4px;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 7.2em;
  height: 2.7em;
  cursor: default;
  margin: 0 -40px auto !important;
  text-align: center; 
  line-height: 30px;
  color: #FFFFFF;
  font-size: 12px;
}

.ui-slider .ui-slider-handle .glyphicon {
  color: #FFFFFF;
  margin: 0 1px; 
  font-size: 11px;
  opacity: 0.7;
}

.ui-corner-all {
  border-radius: 20px;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.9em;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  border: 1px solid #f9f9f9;
  background: #3498db;
}

.ui-slider-horizontal .ui-slider-handle {
  margin-left: -0.5em;
}

.ui-slider .ui-slider-handle {
  cursor: pointer;
}

.ui-slider a,
.ui-slider a:focus {
  cursor: pointer;
  outline: none;
}

这是小提琴：jsfiddle。更改jquery的版本会使滑块消失。

修改

由于某些原因，在JQuery中覆盖高于1.9的滑块样式不起作用。所以我暂时回到这个版本，虽然我仍然有兴趣知道原因。

无法覆盖高于1.9的版本中的JQuery滑块样式

0 个答案: