最近因為工作需求，要在外掛的輪播套件中加上暫停的按鈕，原本打算塞上 Icon 做切換就好，

但暫停的鍵不大，放上圖片後比例都不大正常，其實是我也懶得細部調整了，最後選擇了操作 innerHTML 置換裡面的DIV元素。

利用DIV填滿背景上色達成Icon的感覺。

完成的效果大概是這樣，不放大仔細看得話其實還蠻像的。

play&pause.mp4

$('.playState').on('click', function() {
			let self = this
			let selfDOM = $(this)
			selfDOM.hover()
			setTimeout(function() {
				selfDOM.unbind('mouseenter').unbind('mouseleave');
			}, 0);
			if (selfDOM.hasClass('pauseState')) {
				console.log("PAUSE");
				selfDOM[0].innerHTML =
					`
					<div class="play"></div>
					<div class="play"></div>
					<div class="play"></div>
					<div class="play"></div>
					<div class="play"></div>
					`
			} else {
				selfDOM[0].innerHTML =
					`
					<div class="line"></div>
					<div class="line"></div>
				`
			}
		})

.pause {
  width: 12px;
  height: 12px;
  background: rgb(0, 0, 0);
  position: absolute;
  bottom: 2px;
  right: 138px;
  display: flex;
  justify-content: center;
  line-height: 12px;
  align-items: center;
  .line {
      border-radius: 5px;
      height: 10px;
      width: 2px;
      background-color: rgb(255, 255, 255);
      margin: 0 1px;
  }
  .play {
      height: 10px;
      width: 1.5px;
      background-color: rgb(255, 255, 255);
      &:nth-child(1) {
          border-radius: 2px;
      }
      &:nth-child(2) {
          height: 8px;
      }
      &:nth-child(3) {
          height: 6px;
      }
      &:nth-child(4) {
          height: 4px;
      }
      &:nth-child(5) {
          height: 2px;
          border-radius: 2px;
      }
  }
}