Method: best

Similar to ‘simple’ but improved by Einar:

• Targets the broader <li> element rather than just the <a> link, so kick in faster.
• Adds an (optional) to show the initial (or another) image hover out image.
• Uses a relative path to the images.
• More secure, according to ChatGPT.

Use this code and uncomment line 15-17 if you want to initial image on hover out and specify that image in line 16.

<script>
jQuery(document).ready(function($) {
  $(".nav > li").mouseenter(function() {
    // Get the image name from the 'rel' attribute
    var imageName = $(this).find("> a").attr('rel');
      // Check if 'rel' attribute is not empty
      if (imageName) {
        // Concatenate path and extension
        var value = "/wp-content/uploads/" + imageName + ".jpg";
        // Set the image source
        $(".menu-image-holder img").attr("src", value).attr("srcset", "");
      }
  }) 
// Set to nav_impressie.jpg on mouseleave
//  .mouseleave(function() {
//    $(".menu-image-holder img").attr("src", "/wp-content/uploads/nav_impressie.jpg").attr("srcset", "");
//  });
});
</script>
Code language: HTML, XML (xml)

Method: simple

Source: https://codepen.io/jmunn302/pen/VwYQJbE

1. In the WP menu, enable the field ‘Link Relationship (XFN)’
2. In that field, add the name of the image (without path/extension) that should show when you hover over that menu item. Images must all have the .jpg extension.
3. Add the default image in the design with the class ‘menu-image-holder’
4. Add a code module with the following script and update the path

<script>
$(".nav li a").mouseover(function() {
    // Get the image name from the 'rel' attribute
    var imageName = $(this).attr('rel');
    // Check if 'rel' attribute is not empty
    if (imageName) {
        // Concatenate path and extension
        var value = "https://YourDomain.com/wp-content/uploads/" + imageName + ".jpg"; 
        // Set the image source
        $(".menu-image-holder img").attr("src", value).attr("srcset", ""); 
    }
});
</script>

Code language: HTML, XML (xml)

Notes

• Below is the original  code, but it didn’t work 100% correct with Divi.
• Added: adds the path to the image in the library and the .jpg extension because the ‘Link Relationship (XFN)’ in the WP menu items does not save :/. characters
• Added: to make ‘srcset’ empty, because Divi adds the srcset from the original image and it isn’t replaced with the original code. Could probably add code to replace it with the correct srcset, but removing is easier and saves code.
• Added: to only return a new image if ‘rel’ is not empty. The original code would return an ‘undefined’ image

$(".menu-list li a").mouseover( function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
    var value=$(this).attr('data-src');
    $(".menu-image-holder img").attr("src", value);
})
Code language: JavaScript (javascript)

Method 3

Source: https://jsfiddle.net/ur7tns7L/

• In the WP menu, enable the css classes field and add a class that describes the image like ‘nav_hotel’, ‘nav_restaurant’ etc
• Add each image to the page with a class and unique ID
  • Class ‘nav_image’ (always the same)
  • ID that describes the image, like ‘nav_hotel’, ‘nav_restaurant’ etc (may be the same as the class)
• Add a code module and add the script and css below.
  • There is a function for each menu item / image that should be shown.
  • The first (mouseenter) line starts with the class you added to the WP menu items
  • This is followed by a line for each of the images with their ID. The one that should show on hover has .show – all others have .hide. Repeat for each menu item class
  • At the end under <Style>, add a list of all ID’s of images that should be hidden with display:none, do not add the ID of the image that should initially be shown.

<script>
  $(document).ready(function() {

    $(".nav_hotel").on("mouseenter", function() {
      $("#nav_hotel").show();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").hide();
      $("#nav_events").hide();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").hide();
	  $("#nav_contact").hide();
    });

    $(".nav_restaurant").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").show();
	  $("#nav_zalen").hide();
      $("#nav_events").hide();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").hide();
	  $("#nav_contact").hide();
    });

    $(".nav_zalen").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").show();
      $("#nav_events").hide();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").hide();
	  $("#nav_contact").hide();
    });
	
    $(".nav_events").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").hide();
      $("#nav_events").show();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").hide();
	  $("#nav_contact").hide();
    });
	
    $(".nav_activiteiten").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").hide();
      $("#nav_events").hide();
      $("#nav_activiteiten").show();
      $("#nav_impressie").hide();
	  $("#nav_contact").hide();
    });	

    $(".nav_impressie").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").hide();
      $("#nav_events").hide();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").show();
	  $("#nav_contact").hide();
    });

    $(".nav_contact").on("mouseenter", function() {
      $("#nav_hotel").hide();
      $("#nav_restaurant").hide();
	  $("#nav_zalen").hide();
      $("#nav_events").hide();
      $("#nav_activiteiten").hide();
      $("#nav_impressie").hide();
	  $("#nav_contact").show();
    });
	
  });
</script>

<style> 
.nav_image {
display: inline-block;
}
#nav_hotel,
#nav_zalen,
#nav_events,
#nav_activiteiten,
#nav_impressie,
#nav_contact{
 display: none;	
}
</style>
Code language: HTML, XML (xml)