1

Learning website development (HTML, CSS, JS, PHP, yadda yadda). I am trying to create a hover effect on an element via CSS, however after a JS function has set a value, it seems I cannot override without using the !important.

I have a scroll function in JS that sets opacity/color/etc. after the user has scrolled down. As it seems that JS affect the elements inline style directly, it will always have a specificity higher than anything in my stylesheet. As such, my :hover effect (increasing the opacity of the button) will be overwritten.

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>

Note that in this particular case I do have a workarounds, such as simply not setting opacity in JS or using the !important in CSS (which works fine). However, I've been told that !important is not good coding, something to the equivalent of a GOTO in older languages and I fear velociraptor attacks. Any suggestions?

Web Nexus
  • 1,150
  • 9
  • 28
Seraphendipity
  • 130
  • 9
  • 1
    I think what you are asking is "how can I override an inline style via CSS?" If so, then see this related SO post - https://stackoverflow.com/a/16813263/864233 – romellem Jun 19 '19 at 20:48
  • 1
    The issue is that the scroll event handler is setting an inline value for the opacity. Inline styles have the highest degree of granularity so they always will take precedence. The !important overrides the precedence. If you do not want to use the !important, you need to re-evaluate your inline styling – Taplar Jun 19 '19 at 20:49
  • 3
    Why not have the scroll handler just apply a class name instead of an inline style? – le3th4x0rbot Jun 19 '19 at 20:51
  • 2
    Also, IntersectionObserver is starting to be pretty commonly supported. – le3th4x0rbot Jun 19 '19 at 20:52

1 Answers1

0

I wouldn't recommend apply styles directly from JavaScript because as you could see, the inline styles will always have priority, unless you use the !important flag.

As a workaround, you could use JavaScript to add a CSS class to your element using element.classList.add, then you can have way more control in your styles.

hkrugner
  • 61
  • 4
  • That's genius! However, does that allow animations still? I'll have to test it tomorrow. – Seraphendipity Jun 19 '19 at 22:33
  • Hey, @Seraphendipity! Glad that I could help with something, but yes, you can use `animation` normally while inserting CSS classes through JavaScript :) – hkrugner Jun 20 '19 at 00:08