I am using this code:

document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById("div#logo1").onclick = function(){
        hideAllImages();
        document.getElementById("01").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo1").classList.add("my_active");
    };
    
    document.getElementById("div#logo2").onclick = function(){
        hideAllImages();
        document.getElementById("02").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo2").classList.add("my_active");
    };
        document.getElementById("div#logo3").onclick = function(){
        hideAllImages();
        document.getElementById("03").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo3").classList.add("my_active");
    };

function hideAllImages() {
    var items = document.getElementsByClassName('changing_text');
    var itemsLen = items.length;
    for(var i = 0; i < itemsLen; i++) {
        items[i].style.display="none";
    }
}});

Which working fine with click event but I want to convert it to be functional when I hover to the element.

What this function must to: for example, when I hover on an image other element must appear and previous element must become hidden.

This is Vanilla Javascript code.

Any suggestions? tried to change .onclick to .onmouseover but not working

Thank you