呈现页面后附加onmouseover？答案

【问题标题】：Attaching onmouseover after page is rendered?呈现页面后附加onmouseover？
【发布时间】：2011-03-05 17:41:53
【问题描述】：

嗨，

当页面第一次呈现时，我的 div 元素看起来像这样：

<div onmousedown="this.className='showhideExtra_down_click';"
   onmouseout="this.className='showhideExtra_down';"
   onmouseover="this.className='showhideExtra_down_hover';"
   class="showhideExtra_down" id="extraFilterDropDownButton">&nbsp;</div>

然后我用 javascript 手动更新 onmouse 属性，所以它看起来像这样：

<div onmousedown="this.className='showhideExtra_down_click';"
   onmouseout="this.className='showhideExtra_down';"
   onmouseover="this.className='showhideExtra_down_hover';"
   class="showhideExtra_down" id="extraFilterDropDownButton">&nbsp;</div>

它们看起来一样，最大的区别是第一个在悬停时会改变类而第二个不会？页面渲染后不能设置吗？

请注意：我需要 IE6 兼容性，这就是为什么我使用 onmouse 而不是 CSS hover

致以最诚挚的问候

编辑：这是我发现的，而且效果很好，我还没有在 IE6 中测试过：

$("#extraFilterButton").hover(function() {
                $(this).attr('class','showhideExtra_down_hover');
            }, 
            function() {
                $(this).attr('class','showhideExtra_down');
            });

【问题讨论】：

你为什么使用内联JS？ jQuery（因为您的问题已被标记）当然可以处理 hover() 函数。以及从元素标签中删除点击处理程序。

标签： javascript jquery html css internet-explorer-6

【解决方案1】：

你可以使用：

$('#selector').live('mouseover',function(){//something todo when mouse over})

live() 允许动态变化

（你可以对'mouseout'做同样的事情）

【讨论】：

【解决方案2】：

为了扩展@maniator 的正确答案，我会使用：

$("#some_id").live("hover",
  function() {
    // do on mouseover
  },
  function() {
    // do on mouseout
  });

【讨论】：

@Harsh 我想是的，jquery 得到了很好的 ie 6 支持，但我已经有一段时间没有尝试过了。
这看起来很糟糕，但我无法让第二个函数在 mouseout 上运行？
@SnowJim 这可能是因为hover 或mouseover mouseout 事件组合相对较新（jQuery 1.4.1）所以你可以做的是1）使用2个函数或2）升级jQuery，见：api.jquery.com/live
我正在使用 jquery-1.4.1。我曾经悬停过这个工作：bavotasan.com/tutorials/…（在主帖中查看我的编辑）

【解决方案3】：

这就是我最终得到的结果：

    $("#extraFilterDropDownButton").hover(function() {
        if($('#divCategoryFilter').css("display") == 'block'){
            $(this).attr('class','showhideExtra_up_hover');
        }
        else{
            $(this).attr('class','showhideExtra_down_hover');
        }
    }, 
    function() {

        if($('#divCategoryFilter').css("display") == 'block'){
            $(this).attr('class','showhideExtra_up');
        }
        else{
            $(this).attr('class','showhideExtra_down');
        }
    });

这还没有在 IE6 中测试。

【讨论】：