Question

我创建了一个menuItems数组并将其分配给id为“leftMenu”的div。

我有动态生成的UL（用户列表）和LI，它附加到div。

我在动态生成的LI中设置了两个属性“onmouseover”和“onmouseout”。

这两个属性在IE7中不起作用，但IE8，IE9，Firefox，Safari和Chrome都能正常工作。

CSS：



    ul{margin:0px; padding:0px; width:200px;}
    li{list-style-type:none;}

    .defaultsMenuBtn {
    background-color: #FEE6A0;
    border-bottom: 1px solid #FFFFFF;
    color: #002C84;
    font-weight: bold;
    padding: 3px 5px;
    }

    a{text-decoration:none;}

    .defaultsMenuBtn_hover{background-color: #FFD14F; padding: 3px 5px; border-bottom: 1px solid #FFFFFF;font-weight:bold; color: #002C84; cursor:pointer;}

HTML



    <div id="leftMenu">  </div>

Javascript



    var menuItems=new Array();
    menuItems[0]="menu01";
    menuItems[1]="menu02";
    menuItems[2]="menu03";
    menuItems[3]="menu04"; 

    var menulength = menuItems.length;
    var MenuWapper = document.getElementById("leftMenu");
    var ul = document.createElement("ul");

    MenuWapper.appendChild(ul);

    for(i=0; i<menulength; i++){
    var li = document.createElement("li");
    var itemID = "item_"+i
    li.className = "defaultsMenuBtn";
    li.id = itemID
    var browser = navigator.appName;

    li.setAttribute("onmouseover","this.className='defaultsMenuBtn_hover'");
    li.setAttribute("onmouseout", "this.className='defaultsMenuBtn'");
    li.innerHTML = " "+menuItems[i]+"";
    ul.appendChild(li);

    }// end forloop

如果需要更多信息，请告诉我们！

Answer 1

我不是100％肯定为什么它在IE7中不起作用，但我不认为IE7中支持.setAttribute('event','fn')。您可能应该替换：

li.setAttribute("onmouseover","this.className='defaultsMenuBtn_hover'");
li.setAttribute("onmouseout", "this.className='defaultsMenuBtn'");

使用

li.onmouseover = function() {
    li.className='defaultsMenuBtn_hover';
}

li.onmouseout = function() {
    li.className='defaultsMenuBtn';
}

设置内联属性无论如何都不是添加侦听器的好方法，最好在javascript中完成。

Answer 2

这是因为在IE7中DOM对动态添加的元素有限制。

您必须在jQuery中使用live()或delegate()方法。

Answer 3

谢谢大卫

这里我在代码中改变了垃圾

li.className='defaultsMenuBtn_hover';
li.className='defaultsMenuBtn

到

this.className='defaultsMenuBtn_hover';
this.className='defaultsMenuBtn

现在它工作正常。

鼠标悬停不适用于ie7中动态生成的li

3 个答案: