我有 2 个并排的 div 容器。左边的 div 有一个包含 3 个 li 元素的无序列表。每个 li 都有一个唯一的 ID。我试图在第一个 li 上获得一个 onmouseover 事件,以将 PNG 文件加载到正确的 div 中。
这是 html:
<div class="twoCol">
<ul class="storeList">
<li id="level_1">Richmond</li> <!-- mouseover loads png in 2nd div -->
<li id="level_2">Santa Maria</li>
<li id="level_3`enter code here`">Venezula</li>
</ul>
</div>
<div class="twoCol" id="jsContent">
<!-- load png into this div via mouseover on ID: level_1 -->
</div>
这是我的 javaScript:
var storeHours = newObject();
storeHours.img = document.createElement("img");
storeHours.src = "store_hours.png";
storeHours.img.appendChild(storeHours.src);
var liElement1 = document.getElementById("level_1"); // ID for 1st li element
var addContent = document.getElementById("jsContent"); // ID for div to load png
liElement1.onmouseover = function() {
addContent.appendChild(storeHours.img);
};
最佳答案
首先,您的 JavaScript 中有一个拼写错误:在 var storeHours = newObject();
中将 new
和 Object
分开。
其次,在 appendChild()
中你必须提供一个节点元素,你用 storeHours.src = "store_hours.png";
创建的实际上是一个字符串.
你有两个选择:
- 使用传统的
setAttribute()
方法:
var storeHours = new Object();
storeHours.img = document.createElement("img");
//storeHours.src = "store_hours.png";
//storeHours.img.appendChild(storeHours.src);
storeHours.img.setAttribute('src', 'store_hours.png');
- 如果要跟随对象近似,使用
setAttributeNode()
方法:
var storeHours = new Object();
storeHours.img = document.createElement("img");
//storeHours.src = "store_hours.png";
//storeHours.img.appendChild(storeHours.src);
storeHours.src = document.createAttribute('src');
storeHours.src.value = 'store_hours.png';
storeHours.img.setAttributeNode(storeHours.src);
关于javascript - 无法在鼠标悬停事件上加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32674529/