Непрозрачность CSS при загрузке страницы

Question

Я не умею создавать сайты, но стараюсь сделать свой собственный. В основном я разбиваю свою страницу на две части, а на левой стороне - панель меню, а справа - содержимое. Чтобы получить «прохладный» эффект размытия над моей панелью меню, я накладываю его на цветное изображение, где, когда пользователь на него нависает, прозрачность изменяется (с переходом).

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

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

#left { 
 
    text-indent: 1cm; 
 
    width: 23%; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: rgba(51, 51, 51, 1); 
 
} 
 
#right { 
 
    padding-top: 2cm; 
 
    width: 77%; 
 
    height: auto; 
 
    position: absolute; 
 
    right: 0; 
 
    background: white; 
 
} 
 
#img { 
 
    position: absolute; 
 
    opacity: 0.6; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none; 
 
    -webkit-transition: opacity .25s ease-out; 
 
    -moz-transition: opacity .25s ease-out; 
 
    -o-transition: opacity .25s ease-out; 
 
    transition: opacity .25s ease-out; 
 
    color: #000; 
 
    left: 0; 
 
} 
 
#left:hover>#img { 
 
    opacity: 0; 
 
}

Я надеюсь, что я дал достаточно информации, заранее спасибо

Bas

Answer 1

Как вы «нагрузки» на странице? это ajax.load или? потому что если это так, этот язык уже используется, и поэтому лучше сделать функцию обработчика зависания там, потому что нет никакого способа, чтобы ваш файл CSS собирался заметить при загрузке, если мышь уже на вашей картинке уже или нет, пока вы не переместили ее

Извините, я не могу поставить комментарии вниз, поэтому я написал здесь.