Affecting CSS selectors through JS

JavaScript
1

I need to change the opacity property of an object after another object is moused over. I need to do this through JS but target the desired CSS selector.

Here’s my html for this section:


<div id="videoBox">
   <div id="videofeat1">
      <img id="posterframe" src="images/videos/feature01.jpg" />
      <img id="posterframeF" src="images/videos/feature01F.jpg" />
   </div>
   <div id="videofeat2">
      <img id="posterframe" src="images/videos/feature02.jpg" />
      <img id="posterframeF" src="images/videos/feature02F.jpg" />
   </div>
</div>

posterframeF are all set to opacity: 0 through CSS and those are the ones I’d like to make visible – selectively depending on which link is rolled over.

I’ve tried this:

videosController.viewDidLoad = function() {
  if (!this.videoButtons) {
    this.videoButtons = this._view.querySelectorAll("#playlist > div");
    for (var i=0; i < this.videoButtons.length; i++) {
      var button = this.videoButtons[i];
      button._videoIndex = i;
      button.addEventListener("mouseover", this, false);
    }
  }
}

the above is how a loop builds a list of the objects I will be rolling over (or at least assigns a unique id to each). This needs to stay as is.

Below is what I’ve tried to invoke a reaction in posterframeF based on the unique id

videosController.elementWasHovered = function (element) {  // these lines need to stay as they are
  if (!TKUtils.objectIsUndefined(element._videoIndex)) {  // these lines need to stay as they are
        if ([element._videoIndex] == 0) {
            var targetFrame = this._view.querySelectorAll("#videofeat1 #posterframeF");
            targetFrame.style.opacity = 1;
            alert("selected frame: "+targetFrame);
           
        } else if ([element._videoIndex] == 1) {
            ... 
        }
  }
};

I have not been successful in making it work though. When I test, the alert box shows selected frame: [object NodeList] which makes me think that it cannot isolate an individual element and sees a list of elements instead…? just a wild guess.

Would anyone know how to make posterframeF inside of videofeat1 visible when the link with assigned videoIndex of 0 is rolled over, posterframeF inside of videofeat2 visible when the link with assigned videoIndex of 1 is rolled over, etc…?

Thanks