href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本

Question

My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an HREF on the resulting "Google" text, and then revert to "hello" onmouseout without a link.我的目标是在鼠标悬停时将文本从“hello”（没有链接）更改为“Google”，并在生成的“Google”文本上提供 HREF，然后在没有链接的情况下恢复为“hello”onmouseout。

The code below works in changing the text from "hello" to "Google" but 1) the link on "Google" does not work (even though I can left-click on "Google" and open the link on another tab) and 2) the text does not change back to "hello" onmouseout.下面的代码用于将文本从“hello”更改为“Google”，但 1）“Google”上的链接不起作用（即使我可以左键单击“Google”并在另一个选项卡上打开链接）和 2 ）文本不会变回“你好”onmouseout。

Thanks for your help in advance!提前感谢您的帮助！

Here is my code:这是我的代码：

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

<div class="container">
    <h1>
        <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="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>

Answer 1

try this way onmouseout="this.innerHTML='Hello.';"试试这种方式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 class="container"> <h1> <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div> </h1> </div>

Answer 2

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" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="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>

Answer 3

By changing a class of a parent tag, any and all child tags can be affected via CSS.通过更改父标签的 class，任何和所有子标签都可以通过 CSS 受到影响。 Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.在页面加载时准备好 HTML 然后隐藏它比不断创建和销毁 HTML 以获得微不足道的效果要好。

The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener .事件"mouseenter"和"mouselrave"由属性事件处理程序和事件侦听器处理。 Either one is sufficient, but avoid using attribute event handlers:任何一个都足够了，但要避免使用属性事件处理程序：

 <div onmouselame="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 class="title hello"> <h1> <span>Hello</span> <a href="https://www.google.com">Google</a> </h1> </header>

href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本

问题描述

3 个解决方案

解决方案1
1 2021-12-16 07:23:44

解决方案2
0 2021-12-16 07:26:59

解决方案3
0 2021-12-16 08:19:17

href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本

问题描述

3 个解决方案

解决方案1 1 2021-12-16 07:23:44

解决方案2 0 2021-12-16 07:26:59

解决方案3 0 2021-12-16 08:19:17

解决方案1
1 2021-12-16 07:23:44

解决方案2
0 2021-12-16 07:26:59

解决方案3
0 2021-12-16 08:19:17