无法在鼠标悬停事件上加载图像

Question

我有 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);     
};

Answer 1

src 是 img 元素的属性，但不是子元素。尝试

storeHours.img.src = storeHours.src;

Answer 2

首先，您的 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);

无法在鼠标悬停事件上加载图像

Can't get image to load on mouseover event

html

javascript

css

event-handling