创建可选择的li项目作为按钮

Question

我有一个用户界面，按钮由列表项组成。我希望能够让它们可以单独选择，在那里它们将控制另一个div的颜色。现在我把它们布局了，并且它们有一个css过渡，当它们在盘旋时会在规模上增长，但我希望在选择时保持完全缩放。我该怎么做？

我尝试使用焦点伪类，但只适用于输入元素。我也尝试过激活的伪类，但我认为我错过了使用它们的东西。

最后，如果我希望他们将另一个div的背景颜色更改为按钮的颜色，我该怎么办？

我还没有构建将要实现的元素，我只是要使用一些形状像背景颜色的正方形的div来测试，但是我在这一点上坚持给列表项活动状态。我可能缺少一些JS方面的内容。

这是我的代码：HTML：

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>

CSS：

/*reset*/
html, body, ul, li, p, a, img, hr{
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}
#colorSelection {
    width: 320px;
    height: 720px;
    background-color:#d4d4d4;
    display: inline-block;
}
.selector{
    margin-bottom: 20px;
    padding: 10px;
    margin-left: 4px;
}
.sectionHeader {
    font-family: helvetica,arial,sans-serif;
    font-size: 20px;
    color:black;
    margin-bottom: 7px;
}
.swatch {
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
    margin-left: 12px;
    text-align: center;
    position: relative;
    transition: transform:2s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
.swatch:hover{
    transform: scale(1.3);
}

.crossbar{
    border:1px white solid; 
    position: relative;
    right: 0px;
    top: 12px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.25);  
}

.one{
    margin-left: 0px;
    background-color:#ffdc01;
    border-color:white;
    transition: border .01s;
}
.one:hover, .one:active {
    border-color:#ffdc01;
}
.two{
    background-color:#f27245;
    border-color:white;
    transition: border .01s;
}
.two:hover, .two:active {
    border-color:#f27245;
}
.three {
    background-color:#db3844;
    border-color:white;
    transition: border .01s;
}
.three:hover, .three:active {
    border-color:#db3844;
}
.four {
    background-color:#754c90;
    border-color:white;
    transition: border .01s;
}
.four:hover, .four:active {
    border-color:#754c90;
}
.five{
    background-color:#005c9f;
    border-color:white;
    transition: border .01s;
}
.five:hover, .five:active {
    border-color:#005c9f;
}
.six{
    background-color:#343333;
    border-color:white;
    transition: border .01s;
}
.six:hover, .six:active {
    border-color:#343333;
}
.seven {
    background-color:#6a6c70;
    border-color:white;
    transition: border .01s;
}
.seven:hover, .seven:active {
    border-color:#6a6c70;
}
.eight {
    background-color:#e9eae8;
    border-color:white;
    transition: border .01s;
}

.eight:hover, .eight:active {
    border-color:#e9eae8;
}

https://jsfiddle.net/cf2zxf88/2/

Answer 1

我希望在选择时保持完全缩放。我该怎么做？

使用CSS类.scale { transfrom: scale(1.3) }，JavaScript可以与el.classList.add()和el.classList.remove()一起使用。

最后，如果我希望他们将另一个div的背景颜色更改为按钮的颜色，我该怎么办？

• 使用document.querySelectorAll()访问所有列表项
• 为每个列表项添加单击事件
• 使用Window.getComputedStyle(el, null).getPropertyValue("background-color")获取背景颜色

总共

（增加了类.scale和<div id="bg"></div>）

var colorButtons = document.querySelectorAll(".swatchSelector > li"),
  bg = document.getElementById("bg"),
  curr = 0;

for (var i = 0; i < colorButtons.length; i += 1) {
  (function(i) {
    colorButtons[i].addEventListener("click", function() {
      bg.style.backgroundColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
      colorButtons[curr].classList.remove("scale");
      curr = i;
      colorButtons[curr].classList.add("scale");
    })
  })(i);
}

colorButtons[curr].classList.add("scale");
bg.style.backgroundColor = window.getComputedStyle(colorButtons[curr], null).getPropertyValue("background-color");

/*reset*/

html,
body,
ul,
li,
p,
a,
img,
hr {
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}

#colorSelection,
#bg {
  vertical-align: top;
  width: 320px;
  height: 720px;
  background-color: #d4d4d4;
  display: inline-block;
}

.selector {
  margin-bottom: 20px;
  padding: 10px;
  margin-left: 4px;
}

.sectionHeader {
  font-family: helvetica, arial, sans-serif;
  font-size: 20px;
  color: black;
  margin-bottom: 7px;
}

.swatch {
  width: 17px;
  height: 17px;
  border: 2px solid;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12px;
  text-align: center;
  position: relative;
  transition: transform:2s ease-in-out;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.swatch:hover,
.scale {
  transform: scale(1.3);
}

.crossbar {
  border: 1px white solid;
  position: relative;
  right: 0px;
  top: 12px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.one {
  margin-left: 0px;
  background-color: #ffdc01;
  border-color: white;
  transition: border .01s;
}

.one:hover,
.one:active {
  border-color: #ffdc01;
}

.two {
  background-color: #f27245;
  border-color: white;
  transition: border .01s;
}

.two:hover,
.two:active {
  border-color: #f27245;
}

.three {
  background-color: #db3844;
  border-color: white;
  transition: border .01s;
}

.three:hover,
.three:active {
  border-color: #db3844;
}

.four {
  background-color: #754c90;
  border-color: white;
  transition: border .01s;
}

.four:hover,
.four:active {
  border-color: #754c90;
}

.five {
  background-color: #005c9f;
  border-color: white;
  transition: border .01s;
}

.five:hover,
.five:active {
  border-color: #005c9f;
}

.six {
  background-color: #343333;
  border-color: white;
  transition: border .01s;
}

.six:hover,
.six:active {
  border-color: #343333;
}

.seven {
  background-color: #6a6c70;
  border-color: white;
  transition: border .01s;
}

.seven:hover,
.seven:active {
  border-color: #6a6c70;
}

.eight {
  background-color: #e9eae8;
  border-color: white;
  transition: border .01s;
}

.eight:hover,
.eight:active {
  border-color: #e9eae8;
}

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one scale"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>
<div id="bg"></div>