Как повлиять на стиль каждого элемента (hover) в одиночку

Question

Я использовал оператор foreach, чтобы получить доступ ко всем элементам IEnumerable и представить его на странице подробностей.Я хочу, чтобы свойство hover каждого элемента влияло только на один элемент.Поэтому я использовал jQuery, чтобы воздействовать на каждый элемент отдельно

Но когда я запускаю код и наведите курсор на один элемент, тогда все элементы влияют на свойство зависания одновременно.

Как влияет на каждый элемент в отдельности?

Вот мой помощник по тегам:

@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>
}

и мой код jQuery:

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

Answer 1

Вы можете искать конкретный дочерний элемент элемента, который вы поместили, таким образом вы можете отобразить только тот элемент, который вы хотите ... элемент $ (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();
        }
    });
});