Blazor wasm で行ホバーを実装する方法

Question

コレクション内の変数行の数に基づいて変化する Blazor テーブル コンポーネントがあります。

<table id="MyTable" class="table table-hover">
    <頭>
        <tr>
            <th>プロジェクト名</th>
            <th>説明</th>
            <th>アップローダー</th>
            <th>アップロード日</th>
        </tr>
    </頭>

    @foreach (Items 内の var item)
    {
        <みんな>
            <tr>
                <th>@item.Name</th>
                <th>@item.Description</th>
                <th>@item.UserName</th>
                <th>@item.UploadDate.ToString("dd-MM-yyyy")</th>
                <th><button type="button" class="btn btn-primary" @onclick="() => DoSomething()">仕事をする</button></th>
            </tr>
        </tbody>
    }
</table>

私がする必要があるのは、マウスが行の上にあるとき、その行の特定の要素のみ有効になることです。

たとえば、このテーブルに 10 行 (1 ～ 10) がある場合、行 1 にカーソルを置くと、行 1 のボタンのみが表示され、クリック可能になります。親行にホバーがない他のボタンは有効にしないでください。

Blazor で、行の上にマウスを置いたときに、その特定の行の ボタンのみを有効にするにはどうすればよいですか?

Answer 1

コメントで述べたように、マウスオーバー時に子要素を表示したくない理由がいくつかあります。それは、マウスを使用するユーザーに依存しているからです。あるいは、行全体をクリック可能にすることもでき、これによりユーザー エクスペリエンスが向上する可能性があります。

ただし、完全を期すために、私が尋ねた問題を解決する方法は次のとおりです:

Razor ページで、行 (親) HTML タグとボタン (子) HTML タグの CSS ID セレクターを追加します。 リーリー

次に、CSS を使用して、行 (親) の上にマウスを置くとボタン (子) にスタイルを適用できます。

リーリー

ユースケースに応じて、異なるスタイルを適用したい場合があります。たとえば、

visibility: hidden; の代わりに display: none; を使用します。