<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [hoveredImage, setHoveredImage] = useState(null);
const handleMouseEnter = (imageSrc) => {
setHoveredImage(imageSrc);
const handleMouseLeave = () => {
imageSrc: 'https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg'
imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne20464172895.png'
imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne1586776004.png'
imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne10272423583.png'
// Add more links and image sources as needed
<div className="container">
<h3>React Js Show different images for each list item onhover</h3>
{links.map((link, index) => (
onMouseEnter={() => handleMouseEnter(link.imageSrc)}
onMouseLeave={handleMouseLeave}
<div className="image-container">
<img src={hoveredImage} alt="Image on hover" />
ReactDOM.render(<App />, document.getElementById('app'));
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: color 0.3s ease-in-out;
/* Change the color on hover */
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
.container:hover .image-container {
/* Adjust the image width as needed */
border: 2px solid #007bff;
/* Add a border around the image */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
/* Add a subtle shadow */