2

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

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

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

我的问题是这样的：点击链接并且光标移开后，DIV 内容并没有变回原来的内容。该onclick事件似乎否定了该onmouseout事件。

如果您有任何建议，请将修改后的代码发布到 codepen；这将不胜感激！这是代码。

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

1 回答 1

0

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

http://cdpn.io/ciHek

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

在旁注中，您可能希望清理 HTML 并对其进行验证。我看到很多丢失或不合适的标签。

于 2013-07-11T15:37:57.083 回答