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

CodePudding user response：

It's not .mouseover it's .onmouseover

CodePudding user response：

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

CodePudding user response：

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.