JQuery OnHover意外工作

Question

Goal：突出显示位于Hover上的tbody的一个表行。

Problem：当鼠标进入td时，悬停会得到“buggy”，而不是简单的inputtype=text。例如。当我的鼠标在包含inputtype=datetime的td位置进入tr时，mouseenter事件不会触发。inputtype=date、select、inputtype=checkbox等也是如此。

码

<table class="myClass">
    <thead data-bind="template: { name: 'SummaryTableHeaderTemplate'}">
    </thead>
    <tbody data-bind="template: { name: 'SummaryTableBodyTemplate', foreach: $data }">
    </tbody>
</table>

function OnHoverIn() {
    $(this).addClass("hover");
}
function OnHoverOut() {
    $(this).removeClass("hover");
}
$("table.myClass").on("mouseenter", "tr", OnHoverIn);
$("table.myClass").on("mouseleave", "tr", OnHoverOut);
$("table.myClass").on("mouseover", "tr", OnHoverIn);

我已经尝试过了：我尝试过很多不同的方法，$("tbody tr").hover(....my two functions above...);和没有"mouseover"事件的尝试。他们的行为都一样。

问题：无论tr/td中有什么内容，我如何启动？

Answer 1

给你：

$(document).ready(function () {
    $("tr").hover(
        function() { // Hover in
            $(this).addClass("hoverClass");
        }, function() { // Hover out
            $(this).removeClass("hoverClass");
        }
    );
});

http://jsfiddle.net/9esmZ/27/

Answer 2

检查这个：小提琴

$(document).ready(function () {
function OnHoverIn() {
    $(this).children().addClass("hover");
};
function OnHoverOut() {
    $(this).children().removeClass("hover");
};  

$(document).on("mouseenter", "tbody tr", OnHoverIn);
$(document).on("mouseleave", "tbody tr", OnHoverOut);
});