Question

目标：突出显示悬停时tbody分开的表格行。

问题：悬停得到“错误”＆＃39;当一个简单的输入[type = text]不在鼠标输入的td中时。防爆。当我的鼠标穿过包含输入[type = datetime-local]的td位置的tr时，mouseenter事件不会触发。输入[type = date]，select，input [type = 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中有什么内容，如何启用onHoverIn / Out来激活？

Answer 1

检查一下：fiddle

$(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);
});

Answer 2

你走了：

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

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

JQuery OnHover意外地工作

2 个答案: