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

Question

我的目标是在鼠标悬停时将文本从“hello”（没有链接）更改为“Google”，并在生成的“Google”文本上提供 HREF，然后在没有链接的情况下恢复为“hello”onmouseout。

下面的代码用于将文本从“hello”更改为“Google”，但 1）“Google”上的链接不起作用（即使我可以左键单击“Google”并在另一个选项卡上打开链接）和 2 ）文本不会变回“你好”onmouseout。

提前感谢您的帮助！

这是我的代码：

<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

试试这种方式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

你可以试试这个，它可以帮助你解决问题

<!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

通过更改父标签的 class，任何和所有子标签都可以通过 CSS 受到影响。 在页面加载时准备好 HTML 然后隐藏它比不断创建和销毁 HTML 以获得微不足道的效果要好。

事件"mouseenter"和"mouselrave"由属性事件处理程序和事件侦听器处理。 任何一个都足够了，但要避免使用属性事件处理程序：

 <div onmouselame="lameAttributeEventHandler()">...</div>

细节在下面的例子中注释

 // 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