我有一个用户界面,按钮由列表项组成。我希望能够让它们可以单独选择,在那里它们将控制另一个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;
}
答案 0 :(得分:2)
我希望在选择时保持完全缩放。我该怎么做?
CSS 类.scale { transfrom: scale(1.3) }
可由 JavaScript 与el.classList.add()
和el.classList.remove()
一起使用。
最后,如果我希望他们改变背景颜色,我该怎么办? 另一个div到按钮的颜色?
document.querySelectorAll()
(已添加课程.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");
&#13;
/*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;
}
&#13;
<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>
&#13;