时间戳

首页 > 解决方案 > 属性上的悬停效果

javascript - 属性上的悬停效果

问题描述

我试图弄清楚如何在-slider-thumb我的范围输入滑块的属性上制作一个 10px 的光环。我正在使用 React、CSS 和 HTML，但由于overflow:hidden属性的原因，我发现这很难做到。这个属性必须保留，因为没有它基本上没有代码工作（这是编辑滑块基础 css 的解决方案的一部分）。我尝试使用 ::after 和 ::before 无济于事。所以我想知道我做错了什么，或者这是否可能，因为我还没有找到任何文档。下面提供的代码和 Codepen。感谢您的任何帮助/建议！

HTML：

<div id="root"></div>

CSS：

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 10px;
  overflow: hidden;
  width: 300px;
  border-radius: 5px;
  outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 10px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  --slider-thumb-background-color: #000;
  background: var(--slider-thumb-background-color);
  border-radius: 50%;
  --box-shadow-color: orange;
  box-shadow: -205px 0 0 200px var(--box-shadow-color);
  cursor: pointer;
  height: 10px;
  width: 10px;
  --border-color: orange;
  border: 3px solid var(--border-color);
}

input[type='range']::-webkit-slider-thumb:hover::after {
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 5px;
  color: yellow;
}

input[type='range']::-webkit-slider-thumb:hover {
  --slider-thumb-background-color: grey;
  --box-shadow-color: red;
  --border-color: red;
}

input[type='range']::-webkit-slider-thumb:active {
  --slider-thumb-background-color: white;
  --box-shadow-color: blue;
  --border-color: blue;
}

input[type='range']::-webkit-slider-thumb:focus {
  --slider-thumb-background-color: white;
  --box-shadow-color: yellow;
  --border-color: yellow;
}

input[type='range']::-webkit-slider-thumb:hover:after {
  border: 10px solid rgb(111, 111, 0.4);
  overflow: auto;
  postion: fixed;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1005px 0 0 1000px red;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}

JS(通天塔)

class VolumeSlider extends React.Component {
  
  constructor() {
    super();
    this.state = {
      value: 120.5
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }  

  render() {
    return (
      <div>
      
      <div className="mb1">
        <input
          className="c-input--range"
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}c</label>
        </div>
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <VolumeSlider />
  </div>,
  document.getElementById("root")
);

https://codepen.io/kcandle/pen/KKMrZKo

标签： javascripthtmlcssreactjs

解决方案

看看这支笔，希望这就是你要找的东西，解释：我已经添加了绝对位置使输入相对位置成为后 1px X 1px，插入然后将 X 轴从 0 转换为我想要的任何值.

    input[type='range']::after{
    content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  visibility: hidden;
   width: 1px;
    height: 1px;
  box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff;
}
input[type='range']:hover::after{
    visibility: visible;
  animation: wave 2s forwards;
}@keyframes wave {
  0% {
   
    transform:translateX(0);
  }
  100% {
    transform:translateX(500px);
  }
}

https://codepen.io/headsick/pen/xxOMXqw

推荐阅读