Curious: maniuplate CSS property ":hover" via vanilla JS?

[WolfShade]

Hello, everyone,

I’ve got a bit of an issue that I’m flubbed on.

I’m trying to re-invent the wheel. A vanilla JS image carousel with thumbnails below the dynamic large image.

I’ve got the carousel part working just fine. But the original developer had set all the thumbnails so that they would initially have an opacity of 0.7 with a hover state opacity of 0.9. If you click on one of the thumbnails to set the large image to that thumbnail, the “:hover” is lost!!

Is there a way to programmatically (via vanilla JS) reset the hover condition for that class? How does one set the style for hover? Or is there a better way?

CSS:

.thumbnail{
  margin: 30px 7px 0;
  float: left;
  border: 1px solid black;
  ..
  opacity: 0.7;
  }
.thumbnail:hover{ opacity: 0.9; }

V/r,

[WolfShade]

I’ll see if I can upload an attachment of what I have, so far.

carousel_WolfShade.html (4.0 KB)

Did that work??

V/r,

[RyanReese]

FYI the overlay isn’t working because you have it as a child of #imgholder and that has a set width and height…then you overflow:hidden that so anything outside of that box is hidden.

Then you take the overlay and make it top:350px (or something) PUSHING IT outside of hte parent thus it’s hidden (clipped).

Not sure why you did your CSS like that but removing overflow:hidden will work (maybe the CSS is just htere preliminary to get a base style to it?)

[RyanReese]

Also I think you meant to give the overlay position:absolute, and not relative? If that’s the case (probable) then also give #imgholder position:relative (your z-index also won’t work without position:relative (or some value here)) so that was null and void .

[WolfShade]

Thanks! I’ll look into that. I’m wrenching someone else’s code, and I’m not a good CSS developer.

[mawburn]

You could do an event, but the best way would be to do it in CSS with some of Ryan’s suggestions. Something is obviously wonky.

I’m also not sure what’s going on and don’t want to download the file.

[RyanReese]

Making it !important works.

.thumbnail:hover{
				opacity: 0.9!important;
				}

Although the CURRENT picture being shown will not have the opacity because your CSS hover rule means it will get 0.9 opacity on hover, and you are already setting that in Javascript for the featured image.

Tested with random images I made here in Photoshop.

[WolfShade]

AHA! Yep… that was it… adding “!important” to the value keeps the hover opacity for the thumbnails!

Thanks, @RyanReese!