Как использовать `onmouse` через` DOM` в `div`, который содержит другие теги?

Question

Мне нужно все внутри idDiv, чтобы вернуть сообщение Enter! Когда указатель мыши перекрывает это idDiv, а также возвращает сообщение Out! Всякий раз, когда указатель мыши покидает idDiv. Этого не происходит! Ошибка в сообщении Out!, которое отображается, даже если указатель мыши находится внутри idDiv.

var array1 = ['aaaaa', 'bbbbb', 'ccccc'];

for (var i = 0; i < array1.length; i++) {
  obj = document.createElement('div');
  obj.setAttribute('id', 'line' + (array1.length - i));
  obj.setAttribute('class', 'class1');
  obj.setAttribute('onmousedown', 'fDown(' + (array1.length - i) + ')');
  obj.setAttribute('onmouseenter', 'fEnter(' + (array1.length - i) + ')');
  obj.setAttribute('onmouseout', 'fOut(' + (array1.length - i) + ')');
  document.getElementById("idDiv").appendChild(obj);

  var nodeNumber = document.createTextNode((i + 1) + 'ª) ');
  var strong = document.createElement('strong');
  strong.appendChild(nodeNumber);
  document.getElementById('line' + (array1.length - i)).appendChild(strong);

  var nodeTxt = document.createTextNode(array1[i]);
  document.getElementById('line' + (array1.length - i)).appendChild(nodeTxt);
}

function fEnter() {
  document.getElementById("p").innerHTML += "Enter! ";
}

function fDown() {
  document.getElementById("p").innerHTML += "Down! ";
}

function fOut() {
  document.getElementById("p").innerHTML += "Out! ";
}

.class1 {
  background-color: skyblue;
  margin: 10px;
  padding: 5px;
}

<div id="idDiv"></div>
Logs:
<p id="p"></p>