Question

我有一个带有弹出窗口的滑块，显示滑块的当前值。但我希望它只在我点击滑块时出现，并在我不点击时消失有办法吗？下面是我的css js和html代码

HTML：

<input type="range" id="myrange" name="myrange" class="zoom-range" min="0.25" max="2.00" step="0.01"/>
<output id="rangeHover" for="myrange" onmouseover="value = myrange.valueAsNumber;"></output>

JS：

function modifyOffset() {
    var el, newPoint, newPlace, offset, siblings, k;
    width    = this.offsetWidth;
    newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
    offset   = -1;
    if (newPoint < 0) { newPlace = 0;  }
    else if (newPoint > 1) { newPlace = width; }
    else { newPlace = width * newPoint + offset; offset -= newPoint;}
    siblings = this.parentNode.childNodes;
    for (var i = 0; i < siblings.length; i++) {
        sibling = siblings[i];
        if (sibling.id == this.id) { k = true; }
        if ((k == true) && (sibling.nodeName == "OUTPUT")) {
            outputTag = sibling;
        }
    }
    outputTag.style.left       = newPlace + "px";
    outputTag.style.marginLeft = offset + "%";
    outputTag.innerHTML        = this.value;
}

function modifyInputs() {   
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].getAttribute("type") == "range") {
            inputs[i].onchange = modifyOffset;

            // the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
            if ("fireEvent" in inputs[i]) {
                inputs[i].fireEvent("onchange");
            } else {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("change", false, true);
                inputs[i].dispatchEvent(evt);
            }
        }
    }
}
window.onload = modifyInputs;

的CSS：

output { 
  position: absolute;
  background-image: linear-gradient(#FAFAD2, #FAFAD2);
  width: 30px; 
  height: 15px; 
  text-align: center; 
  color: black; 
  border-radius: 5px; 
  display: block;  
  bottom: 120%;
  margin-top:5000px;
  font-size:11px;
  left: 100%;
}
output:after { 
  content: "";
  position: absolute; 
  width: 0px;
  height: 0px;
  border-top: 10px solid #FAFAD2;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 100%;
  margin-left: -26px;
  margin-top: -1px;
}
#rangeHover{ 
display: block;
position: relative; 
margin: -50px; 
padding-right:10px;
padding-left:10px;
}

感谢您的帮助！

Answer 1

你可以添加到css：

output
{
    display:none
}
input:hover + output
{
    display:block;
}

<强>更新
点击时可见工具提示：

input:active+ output
{
    display:block;
}

JS滑块工具提示

1 个答案: