我对HTML、Java和CSS非常陌生，并且一直致力于让悬停元素出现在网页的不同区域。我创建了这个jfiddle，它显示了我到目前为止所做的事情:

https://jsfiddle.net/qbrnuwe6/6/

您可以将鼠标悬停在“谷歌”上，在右下角的框中会出现一个图像。类似地，如果将鼠标悬停在“Yahoo”上，右下角的框中会出现不同的图像。

但是，现在，我想创建一个复选框，当选中该复选框时，“Google”和“Yahoo”的列表将出现在“内框”的外面，并填充显示“列表移动到这里”的区域。我希望这可以通过一些函数来实现，比如:

startList = function() {
    var sfEls = document.getElementById("over").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            //first remove all existing classes of .over
            for (var j=0; j<sfEls.length; j++){
                sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
            }
                this.className+=" over";// now add class
        }
    }
}

// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
    
addLoadEvent(startList);

一个应该能够仍然悬停在‘谷歌’和‘雅虎’使图像出现在右下角，因为某种原因，我被如何正确地移动列表卡住了。我不确定这是否能更好地与HTML、Java或CSS一起工作，因此希望得到任何帮助。

顺晟科技：

如果我理解正确的话，应该这样做:

startList = function() {
    var sfEls = document.getElementById("over").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            //first remove all existing classes of .over
            for (var j=0; j<sfEls.length; j++){
                sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
            }
                this.className+=" over";// now add class
        }
    }
}

// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
    
addLoadEvent(startList);