Переходы и зависания перекрывают друг друга, как это исправить? - PullRequest
Новая
       34

Переходы и зависания перекрывают друг друга, как это исправить?

0 голосов
/ 12 декабря 2018

Я делаю деку и наткнулся на проблему.Я стилизовал кнопки, и вот как это должно выглядеть ... Когда вы наводите курсор на кнопку, планета должна:

  • Вращаться вокруг своей оси (это работает)
  • Насыщатьтекстура планеты (которая работает)
  • Исчезает верхнее изображение числа и вращается в противоположную сторону от планеты (это работает)
  • Исчезает нижнее изображение числа, а также поворачивается в противоположную сторону отпланета (, которая вообще не работает )

Вот 3 изображения сайта:

1

2

3

Вот CSS (кнопка = планета, число= изображение с верхней цифрой, число под цифрой = изображение с нижней цифрой): 

    .button {
        position: absolute;
        width: calc(80% - 8px);
        height: calc(80% - 8px);
        background: white;
        border-radius: 200px;
        top: 10%;
        left: 10%;
        text-align: center;
        border: 4px solid white;
        box-shadow:0px 0px 15px 8px black;
        transition: transform 300s, filter 2s;
        transform: rotate(0deg);
    }

    .button:hover {
        transform: rotate(6200deg); 
        filter: saturate(600%);
    }

    .number {
        transition: transform 300s, opacity 2s;
        transform: rotate(0deg);
        opacity: 1;
        position: absolute;
        z-index: 2;
        left: 0;
    }

    .number:hover {
        transform: rotate(-6200deg);
        opacity: 0;
    }

    .number-under {
        position: relative; 
        left: 0; 
        z-index:1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s;
    }

    .number-under:hover {
        opacity: 1;
        transform: rotate(-6200deg);
    }

А вот HTML (он не отображается в моем демонстрационном тексте, поэтому я надеюсь, что это произойдет, когда яопубликуйте это. Я добавлю изображение просто для уверенности):

HTML Code Image

1 Ответ

0 голосов
/ 13 декабря 2018

Я нашел решение, я изменил некоторые CSS: 

    .number-under {
        position: absolute; 
        left: 0; 
        z-index: 1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s, opacity 2s;
    }

    .number:hover ~ .number-under {
        opacity: 1;
        transform: rotate(-6200deg);
    }
...