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 に答える