在 slick.js' 自定义点导航中，活动宽度不匹配

Question

slick official

我自定义了 slick 的点导航并使其成为图像。
它被安排成这样：

但是现在

糟糕
active的图像应该缩小了一半，但是并没有变小..
在开发者工具中，是一个神秘的数字10px，并没有设置成width或height。

如何使这个神秘的10px失效？

slick.js code（Link 到 github 代码）

DOM 这似乎是相关的：

在我的脑海里，悬停的时候

我想让它有这样的感觉。我在 ::before 中插入了 insideBlack 按钮，并用 :hover 摆弄了 opacity，但在我看来，没有留下任何外部按钮..

当 insideBlack 按钮为 hover 而保持 outside 按钮完好无损时，如何实现这样的透明度？

我的代码

CSS

.pxradio {
  position: absolute;
  bottom: -55px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
 }
 .pxradio li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  cursor: pointer;
 }
.pxradio li button {
  text-indent: -9999px;
  border: 0;
  background: url("../img/radio-outside.svg");
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;
 }
.pxradio li button:hover, .pxradio li button:focus {
  outline: none;
 }
.pxradio li.slick-active button {
  background: url("../img/radio-insideBlack.svg");
  width: 4.5px;
  height: 4.5px;
  opacity: 1;
 }

jQuery

$(function(){
  $('#carousel').slick({
    dotsClass: 'pxradio',
  });
});

终于

非常感谢！
稍微定制了一下，最后变成了这个样子
黑色圆圈的轻微偏差可以通过 backface-visibility: hidden; 修复。

.pxradio li button {
  position: relative;    /* Add */
  text-indent: -9999px;
  border: 0;
  background: url("../img/pxradio-n.svg");  /* =radio-outside.svg */
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;
}
.pxradio li button:hover, .pxradio li button:focus {
  outline: none;
}
.pxradio li button::before {    /* ▼ Add everything from here */
  position: absolute;
  content: '';
  background-image: url("../img/pxradio-c.svg");    /* =radio-insideBlack.svg */
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5px;
  height: 3.5px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pxradio li button:hover::before {
  opacity: .2;
}
.pxradio li.slick-active button {
  background: url("../img/pxradio-n.svg"), url("../img/pxradio-c.svg");
  background-size: 10px, 4.5px;
  background-repeat: no-repeat;
  background-position: center, center;
  pointer-events: none;
}

Answer 1

你真正需要的是使用多张背景图片，CSS支持extremely well。

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

为了正确排列，我需要为外部图像使用 10px 尺寸。

.pxradio li.slick-active button {
  background-image: url(https://mqs2.com/box/code/img/pxradio-n.svg), url(https://mqs2.com/box/code/img/pxradio-c.svg);
  background-size: 10px, 4.5px;
  background-repeat: no-repeat;
  background-position: center, center;
}

我写了一个独立的例子here。

更新

在了解了将鼠标悬停在按钮上时您想对内部背景进行不透明处理后，我进行了一些更改。基本上，我不再在同一元素上使用多个背景。我将其中一个背景移动到 ::before，这样我就可以在不影响外环的情况下对其使用不透明度。活动按钮不是 position: relative，因此我在该相对容器内以绝对定位将内部点居中。

此示例有一个始终存在的 active 状态，但您可以使用此代码轻松修改自己的工作。注意 active 按钮的悬停状态。

li button {
  text-indent: -9999px;
  border: 0;
  background: url("https://mqs2.com/box/code/img/pxradio-n.svg");
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;  
}

li.active button {
  position: relative;
}

li.active button::before {
  content: '';
  background-image: url(https://mqs2.com/box/code/img/pxradio-c.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5px;
  height: 4.5px;
}

li.active button:hover::before {
  opacity: .3;
}

/* Ignore */
ul { margin: 0; list-style: none; display: flex; }
li { padding-right: 1em; }
html { margin: 2em; }

<ul>
  <li><button></button></li>
  <li class="active"><button></button></li>
  <li><button></button></li>
</ul>

jsFiddle

在 slick.js' 自定义点导航中，活动宽度不匹配

in slick.js' custom dot nav, width of active doesn't match

css

jquery

slick.js

但是现在

在我的脑海里，悬停的时候

我的代码

终于

更新