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