Witam mam następujący problem chciał bym na swojej stronie zrobić tai efekt jak na allegro że jak najeżdżam myszką na obrazek (item-img) to wyświetla się obok większy div(popover-fluid) z galeria danego przedmiotu. sęk w tym że jak użyję querySelectorAll żeby wybrać wszystkie elementy i klasie (item-img) i chcial bym im przypisać addEventListener ("mouseover") powinienem zrobić to za pomocą forEach lub pętlą for żeby działało dla wszystkich elementów i kompletnie nie wiem jak się do tego zabrać.. pomoże ktoś?
oto sam kod z lista przedmiotów
<?php include 'includes/navbar.php'; ?>
<?php include 'includes/aside.php'; ?>
<div class="main col-sm-12 col-md-9">
<div class="content col-9">
<div class="page-header">
<h2>Zestawy</h2>
</div>
<hr />
<div class="items">
<ul class="itemlist">
<a href="#" class="list-group-item list-group-item-action list-group-item-default">
<div class="single-item">
<div class="row">
**<div class="item-img col-sm-4 col-md-3 col-lg-3" id="pic">
<img class="img-fluid" id="obraz" src="items/1.jpg" alt="obraz" />
</div>
<div class="popover-fluid" id="popover">
<div class="row">
<div class="item-img col-6" id="pop">
<img class="img-fluid" src="items/1.jpg" />
</div>
</div>
</div>**
<div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
<h4>Item 1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique consectetur minima illo obcaecati delectus.
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique
</p>
<br />
<span class="cena">
<h4>Cena: 200 zł</h4>
</span>
<button type="button" class="btn btn-success">
Do Koszyka
</button>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-default">
<div class="single-item">
<div class="row">
<div class="item-img col-sm-4 col-md-3 col-lg-3">
<img class="img-fluid" src="items/2.jpg" alt="obraz" />
</div>
<div class="popover-fluid">
<div class="row">
<div class="item-img col-6" id="pop">
<img class="img-fluid" src="items/2.jpg" />
</div>
</div>
</div>
<div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
<h4>Item 2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique consectetur minima illo obcaecati delectus.
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique
</p>
<br />
<span class="cena">
<h4>Cena: 200 zł</h4>
</span>
<button type="button" class="btn btn-success">
Do Koszyka
</button>
</div>
</div>
</div>
<div class="popover-fluid2">
<div class="row">
<div class="item-img col-6" id="pop">
<img class="img-fluid" src="items/1.jpg" alt="obraz" />
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-default">
<div class="single-item">
<div class="row">
<div class="item-img col-sm-4 col-md-3 col-lg-3">
<img class="img-fluid" src="items/1.jpg" alt="obraz" />
</div>
<div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
<h4>Item 3</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique consectetur minima illo obcaecati delectus.
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique
</p>
<br />
<span class="cena">
<h4>Cena: 200 zł</h4>
</span>
<button type="button" class="btn btn-success">
Do Koszyka
</button>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-default">
<div class="single-item">
<div class="row">
<div class="item-img col-sm-4 col-md-3 col-lg-3">
<img class="img-fluid" src="items/1.jpg" alt="obraz" />
</div>
<div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
<h4>Item 4</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique consectetur minima illo obcaecati delectus.
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique
</p>
<br />
<span class="cena">
<h4>Cena: 200 zł</h4>
</span>
<button type="button" class="btn btn-success">
Do Koszyka
</button>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-default">
<div class="single-item">
<div class="row">
<div class="item-img col-sm-4 col-md-3 col-lg-3">
<img class="img-fluid" src="items/1.jpg" alt="obraz" />
</div>
<div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
<h4>Item 5</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique consectetur minima illo obcaecati delectus.
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aspernatur veritatis dolor autem inventore non
similique
</p>
<br />
<span class="cena">
<h4>Cena: 200 zł</h4>
</span>
<button type="button" class="btn btn-success">
Do Koszyka
</button>
</div>
</div>
</div>
</a>
</div>
<div class="pagination justify-content-center">
<ul class="pagination">
<li class="page-item-prev">
<a class="btn disabled" href="#" tabindex="-1">← Poprzednia</a>
</li>
<li class="page-item-next">
<a class="btn" href="zestawy.1.php">Następna →</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>