Jquery在悬停时加载MVC视图会导致闪烁问题

Question

我希望每个div在鼠标悬停时展开并更改其内容，并在鼠标输出时返回到以前的状态。我这样做的方式是使用MVC局部视图：

(Subpages.cshtml)

<div id="subpages" class="mx-auto d-flex justify-content-evenly">
    <div class="subpage" id="subpage1">
        @Html.Partial("Subpage1Narrow")
    </div>
    <div class="subpage" id="subpage2">
        @Html.Partial("Subpage2Narrow")
    </div>
    <div class="subpage" id="subpage3">
        @Html.Partial("Subpage3Narrow")
    </div>
</div>

(Subpage1Narrow.cshtml)

<div class="d-flex align-items-start flex-column" style="width: 456px;">
    <p class="subpage__title mb-4 mx-4"><b>Subpage<br>1</b></p>
    <br>
    <p class="mx-4">...</p>
    <button type="button" class="btn btn-danger mt-auto mb-5 mx-4" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>

(Subpage1Wide.cshtml)

<div class="d-flex flex-column align-items-center mx-auto" style="width: 1368px; height: 681px;">
    <p class="text-center subpage__title mb-4 mx-4 mt-auto"><b>Subpage 1</b></p>
    <br>
    <b class="text-center mb-5 subpage__text--extended">...</b>
    <div class="row w-50 text-center mb-3">
        <div class="col">
            <img src="~/img/ICON1.svg" width="57" height="49">
        </div>
        <div class="col">
            <img src="~/img/ICON2.svg" width="66" height="59">
        </div>
        <div class="col">
            <img src="~/img/ICON3.svg" width="37" height="56">
        </div>
    </div>
    <div class="row w-50 text-center mb-5">
        <div class="col">
            <b class="d-block subpage__subtitle--extended">1</b>
        </div>
        <div class="col">
            <b class="d-block subpage__subtitle--extended">2</b>
        </div>
        <div class="col">
            <b class="d-block subpage__subtitle--extended">3</b>
        </div>
    </div>
    <button type="button" class="btn btn-danger mt-4 mb-5" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>

(site.css奇怪的黑客攻击，但我对其他方法有问题)

#subpages:hover > .subpage:not(:hover) {
    width: 0;
}

(HomeController.cs)

public IActionResult GetView(string viewName)
{
    return PartialView(viewName);
}

(site.js)

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

$(document).ready(function () {
    $(".subpage").mouseover(function () {
         $(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Wide`})
    });

    $(".subpage").mouseout(function () {
         $(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Narrow`})
    });
});

然而，这会导致非常不可靠的行为。每当我移动鼠标时，div的内容都会闪烁，有时在鼠标移出时不会变回原来的状态。这是我第一次将C#和前端混合在一起，所以我确定我在这里犯了一些错误，但我就是找不到解决这个问题的方法。有吗？或者我应该以某种方式彻底改变我的方法？

谢谢你的帮助。

Answer 1

添加mousemove怎么样？

$(".subpage").mousemove(function(){
  $(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Wide`})
});