悬停时图标不会受到影响

Question

悬停时，我想翻译图标，但CSS对其无效。

#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
}

#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  box-sizing: border-box;
}

#humberger div:nth-of-type(1) {
  top: 0;
}

#humberger div:nth-of-type(2) {
  top: 10px;
}

#humberger div:nth-of-type(3) {
  bottom: 0;
}

#humberger:hover {
  div:nth-of-type(1) {
    transform: rotate(20deg);
  }
  div:nth-of-type(2) {
    transform: translateX(100px);
    background: rgba(255, 255, 255, 0);
  }
  div:nth-of-type(3) {
    transform: rotate(-20deg);
  }
}

<div id="humberger">
  <div onclick='openNav()'></div>
  <div onclick='openNav()'></div>
  <div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>

我希望翻译如下。

如果有人给我任何知识来解决这个问题，我会很高兴的。

Answer 1

我认为您的CSS表示法无效。

改为尝试以下结构：

#humberger:hover > div:nth-of-type(1){
    transform: rotate(20deg);
    cursor: pointer;
}

（经测试有效）

Answer 2

请尝试以下代码。

css

#humberger div{
  position: absolute;
  left:0;
  height:4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  box-sizing: border-box;
  transition: 0.5s all ease 0s;
}
#humberger:hover div {
  transition: 0.5s all ease 0s;
}
#humberger div:nth-of-type(1){
  top:0;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom:0;
}
#humberger:hover div:nth-of-type(1){
  transform: rotate(45deg);
  top: 10px;
}
#humberger:hover div:nth-of-type(2){
  background: rgba(255, 255, 255, 0);
}
#humberger:hover  div:nth-of-type(3){
  transform: rotate(-45deg);
  bottom: 10px;
}

Answer 3

添加过渡时间和过渡起点并调整旋转度。

#humberger div{
  position: absolute;
  left:0;
  height:4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  box-sizing: border-box;
  transition: .2s; /*Add transition time*/
  transform-origin: 100% center; /*Add transform origin*/
}

#humberger:hover{

  div:nth-of-type(1){
    transform: rotate(-55deg); /*Adjust angle*/
  }

  div:nth-of-type(2){
    transform: translateX(100px);
    background: rgba(255, 255, 255, 0);
  }

  div:nth-of-type(3){
    transform: rotate(55deg); /*Adjust angle*/
  }
}

Answer 4

请遵循SASS结构。

这是您的结构的SASS代码：

#humberger {
    position: relative;
    height: 24px;
    width: 24px;
    display: inline-block;
    box-sizing: border-box;
    div{
        position: absolute;
        left:0;
        height:4px;
        width: 24px;
        background-color: #444;
        border-radius: 2px;
        box-sizing: border-box;
        transition: all 0.3s;
        &:nth-of-type(1){
            top:0;
        }
        &:nth-of-type(2) {
            top: 10px;
        }
        &:nth-of-type(3) {
            bottom:0;
        }
    }
    &:hover{
        div{
            &:nth-of-type(1){
                transform: rotate(45deg);
                top: 0;
                bottom: 0;
                margin: auto;
            }
            &:nth-of-type(2){
                transform: translateX(100px);
                background: rgba(255, 255, 255, 0);
            }
            &:nth-of-type(3){
                transform: rotate(-45deg);
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }
    }
}

这是普通CSS的代码段。

#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#humberger div:nth-of-type(1) {
  top: 0;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom: 0;
}
#humberger:hover div:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
  bottom: 0;
  margin: auto;
}
#humberger:hover div:nth-of-type(2) {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
  bottom: 0;
  margin: auto;
}

<div id="humberger">
    <div onclick='openNav()'></div>
    <div onclick='openNav()'></div>
    <div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>

上面的SASS代码的工作原理与代码段相同。

我希望这个答案对您有所帮助。

谢谢...