so I have used a img tag inside a list tag and I want to use a mouse over event to show on which image Im hovering above
<div class="imgBox"><img src="" alt="" /></div>
<ul class="Thumbnail" id="thumbnail">
<li>
<a href="img1.jpg" target="imgBox"
><img src="img1.jpg" width="120px"
/></a>
</li>
<li>
<a href="img2.jpg" target="imgBox"
><img src="img2.jpg" width="120px"
/></a>
</li>
<li>
<a href="img3.jpg" target="imgBox"
><img src="img3.jpg" width="120px"
/></a>
</li>
<li>
<a href="img4.jpg" target="imgBox"
><img src="img4.jpg" width="120px"
/></a>
</li>
<li>
<a href="img5.jpg" target="imgBox"
><img src="img5.jpg" width="120px"
/></a>
</li>
</ul
It's worth noting the mouseover event bubbles. If you choose to use this you can just set a single mouseover event listener on the parent element (the <ul>) rather than setting event listeners on every image.
You can do this as follows...
document.getElementById("thumbnail").addEventListener("mouseover", outputImage);
function outputImage(e) {
e.target.style.borderColor = "// desired color";
}
If you are unfamiliar with event bubbling and capturing, please refer to this SO thread.
Edit: Now that you've mentioned your goal is to change the border color, consider the :hover CSS pseudo-class as others have mentioend.