href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本
Posted
技术标签:
【中文标题】href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本【英文标题】：href link not working with innerHTML script with "onmouseover change text" and onmouseout 【发布时间】：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>
【问题讨论】：
【参考方案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>【讨论】：
以上是关于href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本的主要内容，如果未能解决你的问题，请参考以下文章
firebase 动态链接预览链接不适用于 facebook Messenger
iOS - UITextView上的链接不适用于UIScrollView