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

【问题标题】：href link not working with innerHTML script with "onmouseover change text" and onmouseouthref 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本
【发布时间】：2022-01-19 07:35:09
【问题描述】：

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

下面的代码可以将文本从“hello”更改为“Google”，但是，

“Google”上的链接不起作用（即使我可以右键单击“Google”并在另一个选项卡上打开链接）
鼠标退出时文本不会变回“hello”。

提前感谢您的帮助！

这是我的代码：

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

【问题讨论】：

标签： javascript html href onmouseover onmouseout

【解决方案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>

【讨论】：

文本确实发生了变化，并且锚点也被添加了，但锚点链接不可点击。没有办法点击锚标签。您的代码 - jsfiddle.net

【解决方案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>

【讨论】：

答案不是问题所在，请尝试更详细。

【解决方案3】：

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

事件"mouseenter" and "mouselrave" 由property event handler 和event listener 处理。任何一个都足够了，但要避免使用属性事件处理程序：

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

【讨论】：