Blazor wasm에서 행 호버를 구현하는 방법

Question

컬렉션의 변수 행 수에 따라 변경되는 Blazor 테이블 구성 요소가 있습니다.

<table id="MyTable" class="table table-hover">
    <머리>
        <tr>
            <번째> 프로젝트 이름
            <번째>설명
            <번째>업로더
            <번째> 업로드 날짜
        </tr>
    </머리>

    @foreach(항목의 var 항목)
    {
        <본문>
            <tr>
                @item.Name
                @item.Description
                @item.UserName
                @item.UploadDate.ToString("dd-MM-yyyy")
                <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 태그에 대한 CSS ID 선택기를 추가합니다.

으아아아

그런 다음 CSS를 사용하여 행(상위) 위로 마우스를 가져가면 버튼(하위)에 스타일을 적용할 수 있습니다.

으아아아

사용 사례에 따라 다양한 스타일을 적용할 수 있습니다. 예를 들어 visibility: hide; 대신 display: none;

을 사용하세요.