[英]Change Element inside element with Onclick or Hover property
<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网站上工作。 所以,你能帮忙吗?
除了已经从javascript附加图像和文本框之外,您已经可以为它们都编写html代码并根据需要进行隐藏/显示。 我认为这将使事情变得更加轻松和整洁。
至于Hover属性,您可以使用jquery附加hover事件。 您可以检查以下链接: http : //api.jquery.com/hover/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.