Как поменять стиль у того элемента, на который навел мышь

Question

Я написал простенькую таблицу пифагора, где мне нужно взаимодействовать с каждой ячейкой таблицы. То есть, я навожу на ячейку и она перекрашивается в другой цвет. Сделать я это хочу только с использование Blazor и C# (без JavaScript). Может будут у кого какие предложения? Пробовал использовать @ref - ничего не получилось

@{
    <table>
        <tbody>
            @for (int i = 1; i <= 10; i++)
            {
                <tr style="width: 25px; height: 25px; background-color: wheat; text-align: center; font-family:Arial">
                    @for (int j = 1; j <= 10; j++)
                    {
                        if (i == j)
                        {
                            Item item = new Item(false);
                            Items.Add(item);
                            <td @ref="item.er" @onmouseout="() => item.isOver = false" @onmouseover="() => item.isOver = true" 
                                style="@(item.isOver ? "background-color: green" : "background-color: red")" >@(i * j)</td>
                            @*<td style="width: 50px; height: 50px; font-weight:bold; border: 4px solid black; color: #ddff34; background: linear-gradient(to bottom right, #5baf5a, #85fd85)">@(i * j)</td>*@
                        }
                        else
                        {
                            <td style="border: 4px solid black; width: 50px; height: 50px">@(i * j)</td>
                        }
                    }
                </tr>
            }
        </tbody>
    </table>
}

Answer 1

можно использовать привязку данных и события

События @onmouseover и @onmouseout вызывают методы OnMouseOver и OnMouseOut, которые изменяют свойство IsHovered ячейки, что и меняет стиль ячейки без использования JavaScript, используя только Blazor и C#

чтобы избежать NullReferenceException, я добавила инитиализацию таблицы в OnInitialized, ну и класс модели, чтоб демо на гиф показать

@page "/tableHover"

@rendermode InteractiveServer

@using System.Collections.Generic

<table>
    <tbody>
        @for (int i = 1; i <= 10; i++)
        {
            <tr>
                @for (int j = 1; j <= 10; j++)
                {
                    var item = Items[i - 1][j - 1];
                    <td @onmouseover="() => OnMouseOver(item)"
                        @onmouseout="() => OnMouseOut(item)"
                        style="@(item.IsHovered ? "background-color: green" : "background-color: red");
                               width: 50px; height: 50px; text-align: center;">
                        @item.Value
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

@code {
    private List<List<CellItem>> Items { get; set; } = new List<List<CellItem>>();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 10; i++)
        {
            var row = new List<CellItem>();
            for (int j = 1; j <= 10; j++)
            {
                row.Add(new CellItem(i * j));
            }
            Items.Add(row);
        }
    }

    private void OnMouseOver(CellItem item)
    {
        item.IsHovered = true;
    }

    private void OnMouseOut(CellItem item)
    {
        item.IsHovered = false;
    }

    public class CellItem
    {
        public bool IsHovered { get; set; }
        public int Value { get; set; }

        public CellItem(int value)
        {
            Value = value;
            IsHovered = false;
        }
    }
}

БЛОГ НА HUSL

Как поменять стиль у того элемента, на который навел мышь

Ответы (1 шт):