gpt4 book ai didi

javascript - 单击后恢复 mouseout 上的 div 内容

转载 作者:行者123 更新时间:2023-11-30 06:31:05 27 4
gpt4 key购买 nike

我希望在满足以下任一条件时更改 DIV 的内容:

  • 点击 DIV 上方的文本链接
  • 将鼠标悬停在 DIV 本身上

当光标从 div 或链接移开时,DIV 内容应恢复到其原始状态。

我的问题是:单击链接后 DIV 内容不会变回原来的内容, 光标移开。 onclick 事件似乎否定了 onmouseout 事件。

如果您有任何建议,请将修改后的代码发布到codepen;这将不胜感激! Here is the code.

<html><head><title>Title</title>

<SCRIPT LANGUAGE="JavaScript">
function changeContent1()
{
document.getElementById("myDiv").innerHTML='<a href="#" onmouseout="changeContentBack1()" style="text-decoration:none"><div style="background:black;color:white;width:450px;height:203px">THIS TEXT APPEARS ON CLICK OR ROLLOVER</div>'
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
function changeContentBack1()
{
document.getElementById("myDiv").innerHTML='<a href="#" onmouseover="changeContent1()" style="text-decoration:none"><div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT</div></a>'
}
</SCRIPT>

</head>
<body>

<div style="width:450px;float:left">This is the section title. <a href="#" onclick="changeContent1()"><a href="#" onclick="changeContent1()">Click for more info</a><br><br>
<div id="myDiv"><a href="#" onmouseover="changeContent1()" style="text-decoration:none">
<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT
</div></a>
</div>
</div>
</body>
</html>

最佳答案

我在你的代码笔上添加了 onmouseout="changeContentBack1()" 到你的链接,它工作正常。

http://cdpn.io/ciHek

http://codepen.io/anon/pen/ciHek

附带说明一下,您可能想要清理 HTML 并验证它。我看到很多标签丢失或错位。

关于javascript - 单击后恢复 mouseout 上的 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17597440/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com