Есть ли другой способ добавить эффект "зависания" без! Важный после того, как JS установил значение? - PullRequest
Новая
       32

Есть ли другой способ добавить эффект "зависания" без! Важный после того, как JS установил значение?

1 голос
/ 19 июня 2019

Обучение разработке веб-сайтов (HTML, CSS, JS, PHP, yadda yadda).Я пытаюсь создать эффект наведения на элемент с помощью CSS, однако после того, как функция JS установила значение, кажется, что я не могу переопределить без использования! Важное.

У меня есть функция прокрутки в JS, которая устанавливаетнепрозрачность / цвет / и т.д..после того, как пользователь прокрутил вниз.Поскольку кажется, что JS напрямую влияет на встроенный стиль элементов, его специфика всегда будет выше, чем что-либо в моей таблице стилей.Таким образом, эффект my: hover (увеличение непрозрачности кнопки) будет перезаписан. 

window.onscroll = function() {arcScrollEffect()}; // calls scroll function on scrolling
function arcScrollEffect() {
    btn = document.getElementsByClassName("arcHeaderBtn")[0];
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop) {
        btn.style.width = '20%';
        btn.style.fontSize = '2em';
        btn.style.backgroundColor = '#DDD';
        btn.style.color = 'rgba(0, 0, 0, 1)';
        btn.style.opacity = '0.3';
    } else {
        btn.innerHTML = 'RED';

    }
}
.arcHeaderBtn {
    background-color: inherit;
    border: none;
    position: fixed;
    top: 10vh; 
    left: 0;
    width: 100%;
    font-size: 6em;
    text-align: center;
    opacity: 0.5;
    border-radius: 0 0.6em 0.6em 0;
    transition: color 1s, background-color 1s, width 1s, top 1s, font-size 1s, opacity 1s;
}

button.arcHeaderBtn:hover {
    opacity: 0.5 !important;
}
<button class="arcHeaderBtn">Button</button>

Обратите внимание, что в этом конкретном случае у меня есть обходные пути, такие как просто не установка непрозрачности в JS или использование! Важное в CSS (котороеработает отлично).Однако мне сказали, что! Важно не хорошее кодирование, что-то, что эквивалентно GOTO на старых языках и Я боюсь атак на велоцирапторы. Есть предложения?

1 Ответ

0 голосов
/ 20 июня 2019

Я бы не рекомендовал применять стили непосредственно из JavaScript, потому что, как вы могли видеть, встроенные стили всегда будут иметь приоритет, если вы не используете флаг !important.

В качестве обходного пути вы можете использовать JavaScript, чтобы добавить класс CSS к своему элементу, используя element.classList.add, тогда у вас будет намного больше возможностей для управления стилями.

...