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

Question

光滑的官员

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

但现在

oops
的图片active本来应该缩小一半的，但是并没有变小。。
在开发者工具中，是一个神秘的数字10px，没有设置为widthor height。

我怎样才能使这个神秘无效10px？

---

slick.js 代码（链接到 github 代码）

似乎相关的DOM：

---

在我的脑海中，当悬停时

我想让它感觉像这样。我将 insideBlack 按钮插入::before并摆弄opacity，:hover但以我的方式没有留下外部按钮..

hover当 insideBlack 按钮保持不变的同时保持外部按钮不变时，如何制作这样的透明度？

---

我的代码

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;
}

标签： jquerycssslick.js

Answer 1

你真正需要的是使用多个背景图片，它CSS支持非常好。

使用逗号分隔的 background-image 属性值列表指定多个背景图像，每个值生成一个单独的“背景层”。列表中的第一个值表示顶层（最靠近用户），随后的层依次呈现在后面。

为了正确排列，我需要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;
}

我在这里写了一个独立的例子。

更新

在了解了将鼠标悬停在按钮上时想要对内部背景进行不透明度处理后，我进行了一些更改。基本上，我不再在同一个元素上使用多个背景。我将其中一个背景移动到，::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