href link 无法使用带有 "onmouseover change text" 和 onmouseout 的 innerHTML 脚本

Question

我的目标是将鼠标悬停时的文本从“hello”（没有 link）更改为“Google”，并在生成的“[=32=”上提供 'href' ]" 文本，然后在没有 link.

的情况下恢复为 "hello" onmouseout

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

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

提前感谢您的帮助！

这是我的代码：

<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" and "mouselrave" are handled by a property event handler and an 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>

href link 无法使用带有 "onmouseover change text" 和 onmouseout 的 innerHTML 脚本

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

html

javascript

href

onmouseover

onmouseout