<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 更改为 textbox 和 Onclick 或 hover 属性。可能会有很多错误，因为这是我第一次尝试 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 网站上工作。
那么，你能帮忙吗？
最佳答案
您可以为两者编写 html 代码并根据需要隐藏/显示，而不是从 javascript 附加图像和文本框。我认为这会让事情变得更简单和整洁。
至于悬停属性，你可以用jquery附加悬停事件。 您可以查看以下链接:http://api.jquery.com/hover/
关于javascript - 使用 Onclick 或 Hover 属性更改元素内部的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29075636/