href link not working with innerHTML script with "onmouseover change text" and onmouseout-CodePudding

My goal is to have text change onm ouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onm ouseout without a link.

The code below works in changing the text from "hello" to "Google" but,

the link on "Google" does not work (even though I can left-click on "Google" and open the link on another tab)
the text does not change back to "hello" onm ouseout.

Thanks for your help in advance!

Here is my code:

<style>
    .container {
        margin-top: 6vw;
        margin-left: 40%;
        margin-right: 40%;
}
</style>

<div >
    <h1>
        <div  id="hello1" onm ouseover="changeText()" onm ouseout="changeText(this,'Hello.')">Hello.</div>
    </h1>
</div>

<script>
    function changeText() {
        if (document.getElementById("hello1")) {
            a = document.getElementById("hello1")
            a.innerHTML = '<a href="https://www.google.com">Google</a>'
        }
    }
</script>

CodePudding user response：

try this way onmouseout="this.innerHTML='Hello.';"

function changeText() {
        if (document.getElementById("hello1")) {
            a = document.getElementById("hello1")
            a.innerHTML = '<a href="https://www.google.com">Google</a>'
        }
    }

 .container {
        margin-top: 6vw;
        margin-left: 40%;
        margin-right: 40%;
}

<div >
    <h1>
        <div  id="hello1" onm ouseover="changeText()" onm ouseout="this.innerHTML='Hello.';">Hello.</div>
    </h1>
</div>

CodePudding user response：

By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.

The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:

 <div onm ouselame="lameAttributeEventHandler()">...</div>

Details are commented in the example below

// Reference the <header>
const hdr = document.querySelector('.title');

/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
//            '.google' class is added
//            '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
  this.classList.add('google');
  this.classList.remove('hello');
};

/* This is an even listener 
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler 
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
  this.classList.add('hello');
  this.classList.remove('google');
});

.title {
  height: 50px;
  margin-top: 3vh;
  border: 3px solid black;
  text-align: center;
}

h1 {
  margin: auto 0;
}

.hello span {
  display: inline-block;
}

.hello a {
  display: none;
}

.google a {
  display: inline-block;
}

.google span {
  display: none;
}

<header >
  <h1>
    <span>Hello</span>
    <a href="https://www.google.com">Google</a>
  </h1>
</header>

CodePudding user response：

You can try this, May it help u to solve the problem

<!DOCTYPE html>
    <head>
    <title>change text on mouse over and change back on mouse out
    </title>
    
    <style>
    #box {
    float: left;
    width: 150px;
    height: 150px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 15px;
    border: 5px solid black;
    }
    </style>
    </head>
    <html>
    
    <body>
    <div id="box" onm ouseover="changeText('Yes, this is onm ouseover Text')" onm ouseout="changeback('any thing')" >
    
    <div id="text-display" >
    any thing 
    </div>
    
    </div>
    
    <script type="text/javascript">
        function changeText(text)
            {
                var display = document.getElementById('text-display');
                display.innerHTML = "";
                display.innerHTML = text;
            }
              function changeback(text)
            {
                var display = document.getElementById('text-display');
                display.innerHTML = "";
                display.innerHTML = text;
            }
        </script>
    </body>
    </html>