JQuery：代码片段在'Hover'上冲突

Question

我有一个如下所示的表，

<table class="table" style="border:2px solid black; width:100%">
<tr>
    <th><h4>New Request</h4></th>
    <th><h4>Existing Request</h4></th>
</tr>
    <tr>
        <td class="colorhover" style="border-right:2px solid lightgrey; width:1%;">
            @{Html.RenderPartial("~/Views/Shared/_NewRequest.cshtml", Model);}
        </td>
        <td class="colorhover" style="width:1%;">
            @{Html.RenderPartial("~/Views/Shared/_ExistingRequest.cshtml", Model);}
        </td>
    </tr>

当桌子主体悬停在上面时，背景颜色为绿色。使用：

$(".colorhover").hover(
//hover
function () {
    $(this).css("background", "#CEF6CE");
},
//dehover
function () {
    $(this).css("background", "");
})

此外，当任一列悬停在其上时，光标将放置在任一列的顶部文本输入中。使用：

$("#newrequesthover").hover(function () {
    $("#imei").focus();
    $("#filtername").blur();
});
$("#existingrequesthover").hover(function () {
    $("#imei").blur();
    $("#filtername").focus();
});

这很好，我的问题是当我点击新请求部分视图中的一个选择下拉列表时。我的光标被移到顶部文本输入，选择下拉菜单立即关闭，

那么，当我将鼠标悬停在选择项上时，如何防止这种情况发生呢？

Answer 1

我认为您需要停止事件传播。只需添加

event.stopPropagation();

到select事件。您还需要确保首先触发select事件，即在脚本中首先定义该事件。