2

悬停不工作。我在 Firefox 19.0、Cometbird 11.0、Explorer 9 上对此进行了测试。

我测试过的唯一可以工作的浏览器是 Chrome 25。

这段代码是做什么的？

首先，当鼠标悬停在元素#wrap_req 上时，它会调用一个函数，告诉在#wrap_req 中添加html 内容。

<span id='cancelReq' ></span>

然后当鼠标悬停到元素#cancelReq 时，该元素的背景必须改变。

<script language="JavaScript">
    function mOver(x)
    {   
        var txt = 'cond1';      //let's say it this way to satisfies the IF

        if(txt == 'cond1')          
        {
            var txt2 = "<span id='cancelReq' ></span>";
            $('#wrap_req').html(txt2);
            $('#cancelReq').css('display', x);  

        }   
    }   
</script>

CSS

<style>
    #wrap_req{width:193px; margin:0 auto; border:1px solid red;}
    #cancelReq{display:none; background-image:url(../images/cancel.png); }  
    #cancelReq:hover{background-image:url(../images/cancel2.png);}  
</style>

HTML

<div id='wrap_req' onmouseover=\"mOver('block')\" onmouseout=\"mOver('none')\" >

</div>

我尝试将下面的代码添加到函数 mOver() 的 IF 语句中。

如果，我添加警报（），它工作正常。背景图像发生变化。

但我不需要使用那个 alert();

$('#cancelReq').hover(                          
    function
    {           
        //alert('entered Friends');
        $('#cancelReq').css('background', '#eeeeee');
    }
);
4

1 回答 1

0

首先，我建议您使用addEventListener方法或 jQuery 的on或live绑定您的事件。它比编写内联 JavaScript 更容易、更简洁。

我认为您的问题在于它#cancelReq是一个动态创建的 DOM 元素，并且您在创建之前绑定了.hover事件。您可以使用 jQuery 的.live()方法或在创建 DOM 元素时绑定事件。

我了解到您想切换span元素背景的可见性和颜色？如果是这种情况，您可以通过专门使用 CSS 来管理它，这样对代码的性能和可维护性会更好。

于 2013-03-06T21:59:31.983 回答