3

我正在为 jquery hover 使用这个语法选项。

这是我的代码：

$('mySelector')
    .hover(
        function(){
            $(this).html('<img src="images/myImage2.png" height="23" width="24" />');
        },
        function(){
            $(this).html('<img src="images/myImage1.png" height="23" width="24" />');
        }
    );

mySelector 引用的元素的原始文本是 mouseleave 选项 -$(this).html('<img src="images/myImage1.png" height="23" width="24" />');

mouseenter/mouseover 的第一个处理程序工作正常。但是第二个处理程序，用于 mouseleave/mouseout（应该恢复原始图像），永远不会执行。当我在 firebug 中跟踪它时，触发了 mouseover 事件，但没有达到第二个“function()”。

编辑：

为了清楚起见，我的 html 代码是这样的：

<div id="results">
   <span class="imageClass"><img src="images/myImage1.png" height="23" width="24" /</span>
</div>

然后我的选择器是"#results .imageClass"

4

3 回答 3

3

这个问题的原因可能是触发事件的元素mouseenter（即<img>节点）在触发事件之前从 DOM 中移除mouseleave。事件由mySelector的事件处理程序捕获和处理，但<img>是事件的实际来源。因此，mouseleave事件不是由 new 触发是有道理的<img>，因为鼠标一开始就没有进入它。

澄清一下：事件处理程序绑定到的 DOM 节点（mySelector）与首先触发事件的节点（<img>）不同。因为<img>没有自己的事件处理程序，所以事件将在 DOM 树中冒泡，直到遇到一个节点（在本例中为mySelector）。

事实证明，adeno 的解决方案确实有效，尽管他/她的回答不准确。这是一个工作示例：jsbin.com/ikolog。

有用的资源：

于 2012-07-10T11:16:41.540 回答
1

您正在替换整个元素，并且新元素没有绑定事件处理程序，并且不会与您的悬停功能一起使用，因为它与您最初绑定的元素不同，请尝试：

$('mySelector').hover(function(){
        $('img', this).prop('src', 'images/myImage2.png');
    },
    function(){
        $('img', this).prop('src', 'images/myImage1.png');
    }
);

或者，如果这不是一个选项，请使用on()

于 2012-07-10T10:15:48.410 回答
-1

我同意 PPvG，他在回答中说：

这个问题的原因是触发 mouseenter 事件的元素（即节点）从 DOM 中删除。事件将 DOM 冒泡到 mySelector，在那里它被捕获和处理，但它是事件的源。因此，mouseleave 事件不是由 new 触发的（鼠标从一开始就没有进入它）是有意义的。

因此，作为解决方案，您可以使用.attr('src','full_url_here'). adeneo 在他们的回答中建议使用以下代码：

$('#myImg').hover(function()
    {
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css-grey.png");
    },
    function(){
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png");
    }
);

附加的 HTML 代码：

<div id="mySelector">
    <img id="myImg" src="http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png" />
</div>

最后来个demo：http: //jsbin.com/elofoc/7/edit#preview

于 2012-07-10T10:23:09.250 回答