Hover over one div and content in another div appears

Question

I'm using the code for this vertical tab https://www.w3schools.com/howto/howto_js_vertical_tabs.asp but I don't want the top item (in this case "London") to be open by default when loading the page. I need the content in the other div to only appear when I hover over each item, not stay in place once clicked. I've tried removing the "OpenBydefault" code in the html and the javascript but it doesn't change anything, only the hover effect.

Anyone know how I can amend the code to achieve this?

Thank you!

Answer 1

You could remove the styles for hoover and replace them with event listeners: mouseover and mouseout. Then you could add functions to these event listeners to show and then hide again the related content. Here you can check how to add mouseover and mouse out event listeners: Add 3 event listenres