将鼠标悬停在父级上以触发转换属性

Question

我正在尝试使用悬停效果将我的第二个箭头#arrowDown2转换为显示两个箭头。我希望悬停在arrowDownWrap上触发。

我做错了什么？

＆＃13;

＆＃13;

#blue {
  width: 100%;
  height: 300px;
  background: blue;
}  
#arrowDownWrap {
	position: absolute;
	bottom: 120px;
	left: 50%;
	-webkit-transform: translate(-50%,0);transform: translate(-50%,0);
	cursor: pointer;
}
#arrowDownWrapInner {
	position: relative;
	bottom: 40px;
}
#arrowDown, #arrowDown2 {
    border: solid #FFF;
    border-width: 0 3px 3px 0;
	width: 25px;
	height: 25px;
    display: block;
    padding: 3px;
	-webkit-transform: rotate(45deg);transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
}
#arrowDownWrap:hover #arrowDown2 {
	-webkit-transform: rotate(45deg), translate(0, 40px);transform: rotate(45deg), translate(0, 40px);
}

＆＃13;

<div id="blue">
  <div id="arrowDownWrap">
    <div id="arrowDownWrapInner">
      <i id="arrowDown"></i>
      <i id="arrowDown2"></i>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要指定多个CSS transform属性，则不需要逗号 只需一个接一个地列出它们。

例如：

transform: rotate(45deg) translate(0, 40px);

工作示例：

＆＃13;

＆＃13;

#blue {
  position: relative;
  width: 100%;
  height: 150px;
  background: blue;
}

#arrowDownWrap {
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  cursor: pointer;
}

#arrowDownWrapInner {
  position: relative;
  bottom: 20px;
}

#arrowDown,
#arrowDown2 {
  border: solid #FFF;
  border-width: 0 3px 3px 0;
  width: 25px;
  height: 25px;
  display: block;
  padding: 3px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

#arrowDownWrap:hover #arrowDown2 {
  -webkit-transform: translate(0, 50px) rotate(45deg);
  transform: translate(0, 50px) rotate(45deg);
}

＆＃13;

<div id="blue">
  <div id="arrowDownWrap">
    <div id="arrowDownWrapInner">
      <i id="arrowDown"></i>
      <i id="arrowDown2"></i>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;