Change Click Function to hover (Vanilla Javascript)

Question

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

Answer 1

It's not.mouseover it's.onmouseover

Answer 2

Is it working for you to replace .onclick by .onmouseover ?

Answer 3

These functions are always in format on<event> . It should be .onmouseover as the other answers have already said. Note that you'd be using mouseover if you were adding an event listener using the addEventListener function.