Variables and media queries

Giganews Newsgroups
Subject: Variables and media queries
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Fri, 26 Oct 2018

I have this

:root {
  --opacity: 0.6;
  --colour: rgba(255, 255, 255, var(--opacity));
}
..btn {
  background-color: var(--colour);
}

and then I have a media query

@media...
  .btn:hover {
    /* set opacity here */
  }
}

How do I change the value for --opacity within the media query just for
..btn:hover?

If I add :root to the media query it affects all instances of --colour
on the page (which I don't want).

Andrew Poulos

Replies