I am creating a hip hop timeline that allows users to hover over elements on the timeline to display a popup window on the page. The content of the popup window changes, depending on which timeline element is hovered over. Below is my part of my html and full JS code. I think I am close and believe I can use the event object in order to identify the element. Can someone help me with this? The pop up container that pops up when the user hovers on a timeline element is info__container.
<div class="container">
<div class="hidden info__container">
<div class="info__container--content">
<!-- <h1>The Sugarhill Gang</h1>
<img src="/img/sugarhill.jpeg" alt="Sugarhill Gang" id="sugarhill" />
<p>
This trio kick started the rap movement. Wonder Mike, Master Gee,
and Big Bank Hank made up the group. Their release of The Sugarhill
Gang album created an avenue for African Americans to enter the
music industry. Popular hits from the album include Passion Play and
the famous Rapper's Delight.
</p> -->
<!--
<h1>Run-D.M.C.</h1>
<img src="/img/runDMC.jpeg" alt="Run-D.M.C." id="rundmc" />
<p>
This trio kick started the rap movement. Wonder Mike, Master Gee, and
Big Bank Hank made up the group. Their release of The Sugarhill Gang
album created an avenue for African Americans to enter the music
industry. Popular hits from the album include Passion Play and the
famous Rapper's Delight.
</p>-->
</div>
</div>
<div class="timeline">
<ul>
<li>
<div class="timeline--content--even" i="sn">
<h1>1979</h1>
<p>
Hip Hop begins gaining traction in society. This was the first
time that a rap album entered the top 40 on the Billboard Hot
100 chart. This was due to Sugarhill Gang's album "Rappers
Delight", which reached number 37 on the chart.
</p>
</div>
</li>
<li>
<div class="timeline--content--even" id="ee">
<h1>1988</h1>
<p>
N.W.A. releases their album "Straight Outta Compton", putting
the West Coast on the map. This album was a turning point for
rap and was sparked a lot of uproar and controversy.
</p>
</div>
</li>
</div>
const containerContent = document.querySelector('.info__container--content');
const timelineContainer = document.querySelectorAll('.timeline--content--even');
const sideContent = document.querySelector('.info__container');
timelineContainer.forEach(item => {
item.addEventListener('mouseover', function (e) {
sideContent.classList.remove('hidden');
if(e.target === ) {
containerContent.innerHTML = `
<h1>The Sugarhill Gang</h1>
<img src="/img/sugarhill.jpeg" alt="Sugarhill Gang" id="sugarhill" />
<p>
This trio kick started the rap movement. Wonder Mike, Master Gee,
and Big Bank Hank made up the group. Their release of The Sugarhill
Gang album created an avenue for African Americans to enter the
music industry. Popular hits from the album include Passion Play and
the famous Rapper's Delight.
</p>
`;
};
if(e.target === ) {
containerContent.innerHTML = `
<h1>Run-D.M.C.</h1>
<img src="/img/runDMC.jpeg" alt="Run-D.M.C." id="rundmc" />
<p>
This trio kick started the rap movement. Wonder Mike, Master Gee, and
Big Bank Hank made up the group. Their release of The Sugarhill Gang
album created an avenue for African Americans to enter the music
industry. Popular hits from the album include Passion Play and the
famous Rapper's Delight.
</p>
`;
}
});
});