<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网站上工作。所以，你能帮忙吗？
最佳答案
除了已经从javascript附加图像和文本框之外，您已经可以为它们同时编写html代码并根据需要进行隐藏/显示。我认为这将使事情变得更加轻松和整洁。
至于Hover属性，您可以使用jquery附加hover事件。
您可以检查以下链接：http://api.jquery.com/hover/
关于javascript - 使用Onclick或Hover属性更改元素内部的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29075636/