значок не может быть затронут при наведении

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

соблюдайте структуру 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 работает так же, как и фрагмент.

Надеюсь, этот ответ будет вам полезен.

Спасибо ...

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

Я думаю, что ваши CSS обозначения недействительны.

Попробуйте вместо этого следующую структуру:

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

(проверено и работает)