Jquery 如何单独影响foreach项目样式（悬停）每个项目

我使用

foreach

语句访问

IEnumerable

的所有项，并将其显示在详细信息页面中。我想使每个项目的悬停属性只影响一个项目。所以我使用jQuery单独影响每个项目

但是当我运行代码并将鼠标悬停在一个项目上时，所有项目都会同时影响hovering属性

如何单独影响每个项目

这是我的标记助手：

@foreach (var item in Model.TimeLines)
{
    <section id="timeline">
        <article>
            <div class="inner">
                <span class="date">
                    <span class="day">@item.EventDate</span>
                </span>
                <h2>@item.Title</h2>
                <h5>@Html.Raw(item.Body)</h5>
                <div class="form-group row col-lg-12">
                    @if (User.IsInRole("Admins") || Model.TimeLineCategory.ApplicationUserId == currentUser.Id)
                    {
                        @*<div class="button_cont row col-lg-6" align="center"><a asp-action="Edit" asp-controller="TimeLines" asp-route-id="@item.Id" class="example_c" noopener">Edit</a></div>*@
                        <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Delete" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c" id="del">حذف</a></div>
                        <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Edit" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c">تعديل</a></div>
                    }
                </div>
            </div>
        </article>
    </section>
}

@foreach（Model.timeline中的变量项）
{
@item.EventDate
@项目.标题
@Html.Raw（item.Body）
@if（User.IsInRole（“Admins”）| | Model.TimeLineCategory.ApplicationUserId==currentUser.Id）
{
@* 您可以搜索悬停元素的特定子元素，这样您就可以只显示所需的元素。。。
$（this）元素引用您悬停的元素

$('section article').each(function (i, element) {
    $("div.inner .form-group").on({
        mouseenter: function () {
            $(this).find('.example_c').show();
        },
        mouseleave: function () {
            $(this).find('.example_c').hide();
        }
    });
});

foreach循环中section元素的id如何？您觉得这看起来很奇怪吗？您可以进一步简化：
$（'section article'）.each（function（i，element）{$（'div.inner.formgroup”）.on（'hover'，function（）{$（this）.find（'.example_c'）.toggle（）；}）
$('section article').each(function (i, element) {
    $("div.inner .form-group").on({
        mouseenter: function () {
            $(this).find('.example_c').show();
        },
        mouseleave: function () {
            $(this).find('.example_c').hide();
        }
    });
});