Question

HTML代码：

<ul id="el">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

如何在鼠标悬停时在span元素内创建新元素li？

<ul id="el">
   <li></li>
   <li></li>
   <li><span></span></li><!--on mouseover > new element span-->
   <li></li>
</ul>

Answer 1

document.getElementById('el').addEventListener("mouseover", function(e){
  var e=e.target;
  if (e.nodeName=="LI") {
    var span=e.getElementsByTagName('span')[0];
    if(!span) {
      e.innerHTML="<span></span>";
    }
  }
},false);

这将在插入之前检查现有的SPAN。此外，它不需要JQuery或任何其他JS框架。

在Firefox上测试过，但某些浏览器可能以不同的方式处理e.target部分，所以请记住这一点。

Answer 2

试试这个：

document.getElements('#el > li').addEvent('mouseenter', function(e) {
  var target = document.id(e.target);
  if (!target.getElement('span')) target.adopt(new Element('span'));
});

如果你想删除鼠标上的跨度，那么添加：

document.getElements('#el > li').addEvent('mouseleave', function(e) {
  document.id(e.target).getElements('span').destroy();
});

要小心，因为这些是非常天真的实现，并且是它工作所需的最低限度。

Mootools：如何在鼠标悬停时在`li`元素内创建新元素`span`？

2 个答案: