-1

I want to be able to add hover to the classList of an element to force trigger hovering styles.

In JS, how can I detect all :hover styles and add a hover class to have those same styles?

For example, if the class is:

a:hover {
}

I want to add:

a:hover, a.hover {
}

I want to write a JS script that makes the conversion I mentioned above, adding the a.hover class styles for ALL :hover. How can I do this?

NOTE: I don't have access to the CSS. It's loaded in externally so I can't just add to it. This is why I want to make a script that runs on start to do this.

NGI
  • 192
  • 9
  • 1
    he be more specific with your question? – Aahad May 19 '21 at 18:18
  • @Aahad thanks for the response. I added my question to the bottom. – NGI May 19 '21 at 18:19
  • so you want to add a single hover on classes named a? – Aahad May 19 '21 at 18:20
  • @Aahad No, I want to make a class called `hover`, that when applied triggers the hover functionality. But, I want a JS script that does this automatically. So, it goes through the existing styles, and wherever it sees `:hover`, it created a new CLASS called `hover` for that element with the same styles. Does this make sense? – NGI May 19 '21 at 18:22
  • So you want to apply the same style on every hovered element ? – Charles Lavalard May 19 '21 at 18:23
  • 1
    Consider using `sass`/`scss`. https://sass-lang.com/documentation/at-rules/extend – ulou May 19 '21 at 18:24
  • @CharlesLavalard No, I want to create a new class for each place that `:hover` occurs. For example, maybe there's `a:hover`. I want to make a class using JS that has the same properties called `a.hover`. Does this make sense? – NGI May 19 '21 at 18:25
  • Ok so yes as @ulou said consider using sass/scss – Charles Lavalard May 19 '21 at 18:26
  • 1
    With pure css, you can just create new css class (e.g. `itemHover`) and append it in every html tag you want. – ulou May 19 '21 at 18:31
  • @ulou So the issue is that I'm not the one writing the CSS, it's loaded in from external. This is why I can't use SCSS and just need to add styles to the existing CSS. Does that make sense? Really appreciate your help!! – NGI May 19 '21 at 18:32
  • 1
    You should've include this information in post description. – ulou May 19 '21 at 18:33
  • @ulou Ok sorry, still new to this haha. Will add rn. – NGI May 19 '21 at 18:34
  • 1
    @NGI how do you want to distinguish which one should be hovered and which one not? – ulou May 19 '21 at 18:37
  • @ulou Sorry I'm not sure what you're referring to. Anything with `:hover` in the CSS should add support for using `.hover`. Does that make sense? Thanks again! – NGI May 19 '21 at 18:38
  • @NGI I'm not sure about this, but I think you cannot do that. More info: https://stackoverflow.com/a/11371599/4983752 – ulou May 19 '21 at 18:41

1 Answers1

0

As said in comment you could use a sass/scss mixins

SCSS

@mixin addHover {
  &.hover {
    background-color: red;
  }
  &:hover {
    background-color: red;
  }
}

div {
  width: 100px;
  height: 100px;
  @include addHover;
}

HTML

<div class="hover"></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
Charles Lavalard
  • 2,061
  • 6
  • 26
  • Sorry for the miscommunication, updating my answer, but I actually don't have access to the CSS as it is being loaded in externally. My bad. Really appreciate the help. – NGI May 19 '21 at 18:35