Question

我希望在满足以下任一条件时更改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>

Answer 1

我在代码笔的链接中添加了onmouseout="changeContentBack1()"，但效果很好。

http://cdpn.io/ciHek

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

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

单击后在mouseout上恢复div内容

1 个答案: