JSFiddle - React, Tailwind, and code Playground
by Shashank D
HTML
<!-- Image & Map Widgets -->
<div id="mapContainer" class="itt-contact-img-container">
<img class="itt-full-width-image" src="./Images/mapBanner.png" alt="worldMap">
<img id="bangalorePin" class="itt-contact-pin itt-contact-pin-bangalore" src="./Icons/svg/locationIcon.svg">
<img id="rosevillePin" class="itt-contact-pin itt-contact-pin-roseville" src="./Icons/svg/locationIcon.svg">
<img id="mumbaiPin" class="itt-contact-pin itt-contact-pin-mumbai" src="./Icons/svg/locationIcon.svg">
<img id="jaipurPin" class="itt-contact-pin itt-contact-pin-jaipur" src="./Icons/svg/locationIcon.svg">
<img id="lakeoswegoPin" class="itt-contact-pin itt-contact-pin-lakeoswego" src="./Icons/svg/locationIcon.svg">
<img id="camasPin" class="itt-contact-pin itt-contact-pin-camas" src="./Icons/svg/locationIcon.svg">
<img id="meridianPin" class="itt-contact-pin itt-contact-pin-meridian"...
JavaScript
function meridianHighlight(){
console.log("meridian highlight");
$("#itt-contact-silhouette").attr("src","./Icons/svg/idaho.svg");
$("#itt-contact-hdr-merdian").css("display","block");
$("#itt-contact-info-merdian").css("display","block");
$("#itt-contact-hdr-camas").css("display","none");
$("#itt-contact-info-camas").css("display","none");
$("#itt-contact-hdr-lakeoswego").css("display","none");
$("#itt-contact-info-lakeoswego").css("display","none");
$("#itt-contact-hdr-roseville").css("display","none");
$("#itt-contact-info-roseville").css("display","none");
$("#itt-contact-hdr-jaipur").css("display","none");
$("#itt-contact-info-jaipur").css("display","none");
$("#itt-contact-hdr-mumbai").css("display","none");
$("#itt-contact-info-mumbai").css("display","none");
$("#itt-contact-hdr-bangalore").css("display","none");
$("#itt-contact-info-bangalore").css("display","none");
}
$(document).ready(function(){
console.log("document ready");
document.getElementById("meridianPin").addEventListener("mouseenter", meridianHighlight);
})