使用Onclick或Hover屬性更改元素內部的元素

Question

<html>
  <head>
    <style>
      #container {position:relative;left:15%;}
      #myImage {width:65%;height:280px;}
      #text {padding-top: 50px;}
      #textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
    </style>
  </head>

  <body>
    <div id="container" onclick="changeImage()" >
      <img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
      <div id="textbox">
        <p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>

        <script>
          function changeImage() {
            if (document.getElelmentById("container").innerHTML="myImage") {
              container.appendChild(myImage)
            } else {
              container.appendChild(textbox)
            }
          }
        </script>
      </div>
    </div>
  </body>
</html>

在這里，我正在嘗試為Sharepoint網站頁面創建腳本，以將div的元素從Image更改為具有Onclick或hover屬性的textbox 。 可能會有很多錯誤，因為這是我第一次嘗試JS 。 我也嘗試過

<script> 
function changeImage() {
    var image= document.getElementById("myImage");
    if (image=true) {
       var element = document.getElementById("container");
       var UImage = document.createElementById("myImage");
       element.appendChild(UImage)
    } else {
       var element = document.getElementById("container");
       var Utextbox = document.createElementById("textbox");
       element.appendChild(UImage)
       element.appendChild(Utextbox);
    }
}
</script>


#container:hover #myImage{ display:none; }

我已經在CSS中嘗試了上面的代碼，而不是腳本。 沒用 同時編寫代碼，

a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }

真的很好。 這是為什么？ 我給了class而不是id 。 它也沒有用。 它可以在普通的HTML文件中使用。 但是無法在Sharepoint網站上工作。 所以，你能幫忙嗎？

Answer 1

除了已經從javascript附加圖像和文本框之外，您已經可以為它們都編寫html代碼並根據需要進行隱藏/顯示。 我認為這將使事情變得更加輕松和整潔。

至於Hover屬性，您可以使用jquery附加hover事件。 您可以檢查以下鏈接： http : //api.jquery.com/hover/

使用Onclick或Hover屬性更改元素內部的元素

問題描述

1 個解決方案

解決方案1
0 2015-03-16 11:37:50

使用Onclick或Hover屬性更改元素內部的元素

問題描述

1 個解決方案

解決方案1 0 2015-03-16 11:37:50

解決方案1
0 2015-03-16 11:37:50