Совмещение omouseover="" , :hover и transition:

Question

onmouseover и :hover работают, но при их одновременном действии отключается transition: .

Если сломать анимацию по onmouseover, то :hover работает вместе с transition: -- и для текста, и для фото.

Мой предыдущий вопрос имеет проблемы с onmouseover (там пропущена ; в @keyframe), и в нем работают :hover и transition: вместе.

Z-index по событию omouseover

Но я не могу его отредактировать, т.к. от был откачен назад к ошибке ! Но даже в таком недоделанном виде он демонстрирует собой наглядную часть этого вопроса.

Поэтому, эти 2 вопроса связаны, нельзя их удалять (пока не будет решен этот вопрос, т.к. он включается в себя предыдущий). Они оба демонстрируют работу 2 свойств из 3. Цель: совместить все 3 свойства.

        function RandomInt(min, max) {return Math.floor(Math.random() * (max - min) + min)}
        let root = document.querySelector(":root");
        let rand = RandomInt(1, 4);
        root.style.setProperty("--random", rand)

      :root {
        --visota_menu: 160px;
        --visota_real: calc(100vh - var(--visota_menu));
        --random ;
        --bezier_s: 2s cubic-bezier(0.1, 1, 0.7, 1.5) ; }
         
        @keyframes a_Down {
        from {transform-origin: center top}
         75% {transform-origin: center bottom ;
                     transform: perspective(500px)
                                translate3d(100px, var(--visota_real), 0px)
                                rotateX(calc(var(--random, 1) * 360deg))
                                rotateY(calc(var(--random, 1) * 360deg)) 
             }            }
        #Menu_Common {
           position:relative; }
        #Menu {
           position:absolute;
           z-index:20; }
        img {
           transition: var(--bezier_s); }   
        img:hover {
           transform: scale(1.2);  }
        #cat {
           position: absolute;
           z-index: 10;
           color: red;
           font-family: 'Bebas Neue', 'Roboto', sans-serif;
           font-weight: bold;
           font-size: 92px;
           transition: var(--bezier_s); }
        #cat:hover {
           transform: scale3d(1.3, 1.3, 1.0); }

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    
        <script src="https://seregasmyfavoritesites.on.drv.tw/Site/Vivaldi/js/jquery-3.7.1.min.js"></script>
        <script src="https://seregasmyfavoritesites.on.drv.tw/Site/Vivaldi/js/Animate.js"></script>

        <div id="Menu_Common">
        <o id="cat">CAT</o>
        <div id="Menu" 
             onmouseover="
        AnimateCss('Menu','a_Down',2000,rand*6000),
        AnimateCss('cat','a_Down',3000,rand*7000),
        document.getElementById('cat').style.zIndex=30"
             onmouseout="
        document.getElementById('cat').style.zIndex=10">
<img src="https://seregasmyfavoritesites.on.drv.tw/Site/Vivaldi/images/no_paparacci-1920-150x160.jpg" >
<img src="https://seregasmyfavoritesites.on.drv.tw/Site/Vivaldi/images/SAM1828-1-1278-150x160.JPG" >
        </div>
        </div>

Вопрос: почему не работает onmouseover="", :hover и transition: для id="CAT" одновременно?

Не предлагать -- Неправильно работает transform При анимации Любому понятно, что между вопросами вообще никакой связи, кроме translate, которых на https://ru.stackoverflow.com тысячи . У меня вопрос по 3 свойствам одновременно !

БЛОГ НА HUSL

Совмещение omouseover="" , :hover и transition:

Ответы (0 шт):