así que he usado una etiqueta img dentro de una etiqueta de lista y quiero usar un evento con el mouse para mostrar en qué imagen estoy arriba
<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> </ulVale la pena señalar las burbujas de evento de mouseover . Si elige usar esto, puede configurar un solo detector de eventos de mouseover en el elemento principal (el <ul> ) en lugar de configurar detectores de eventos en cada imagen.
Puedes hacer esto de la siguiente manera...
document.getElementById("thumbnail").addEventListener("mouseover", outputImage); function outputImage(e) { e.target.style.borderColor = "// desired color"; }Si no está familiarizado con el burbujeo y la captura de eventos, consulte este hilo SO .
Editar: ahora que ha mencionado que su objetivo es cambiar el color del borde, considere la pseudo-clase :hover CSS como otros han mencionado.