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

Posted 2023-03-21

【中文标题】Jquery 在悬停时加载 MVC 视图会导致闪烁问题

【英文标题】：Jquery loading MVC Views on hover causes flickering issues

【发布时间】：2021-10-15 22:30:01

【问题描述】：

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

（子页面.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"  >
        </div>
        <div class="col">
            <img src="~/img/ICON2.svg"  >
        </div>
        <div class="col">
            <img src="~/img/ICON3.svg"  >
        </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 奇怪的 hack，但我在使用其他方法时遇到了问题）

#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# 与前端混合，所以我确定我在这里犯了某种错误，但我找不到解决方案。有吗？或者我应该以某种方式彻底改变我的方法？

感谢您的帮助。

【参考方案1】：

添加mousemove怎么样？

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