Blazor wasm에서 행 호버를 구현하는 방법
P粉425119739
P粉425119739 2023-08-13 16:53:14
0
1
447
<p>컬렉션의 변수 행 수에 따라 변경되는 Blazor 테이블 구성 요소가 있습니다. </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>내가 해야 할 일은 마우스를 행 위로 가져갈 때 해당 행의 특정 요소만</em>활성화되는 것입니다. </p> <p>예를 들어, 이 표에 10개의 행(1-10)이 있는 경우 행 1 위로 마우스를 가져가면 행 1에 대한 버튼만 표시되고 클릭할 수 있어야 합니다. 상위 행에 마우스 오버가 없는 다른 버튼을 활성화하면 안 됩니다. </p> <p>Blazor에서 행 위로 마우스를 가져갈 때 해당 특정 행의 <em>버튼만 활성화하려면 어떻게 해야 합니까</em> </p>
P粉425119739
P粉425119739

모든 응답(1)
P粉252116587

댓글에서 언급했듯이 마우스 오버 시 하위 요소를 표시하지 않으려는 데에는 몇 가지 이유가 있습니다. 이는 사용자가 마우스를 사용하는지에 달려 있습니다. 또는 전체 행을 클릭 가능하게 만들어 더 나은 사용자 경험을 제공할 수 있습니다.

완전성을 기하기 위해 제가 요청한 문제를 해결하는 방법은 다음과 같습니다.

Razor 페이지에서 행(상위) 및 버튼(하위) HTML 태그에 대한 CSS ID 선택기를 추가합니다.

으아아아

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

으아아아

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

을 사용하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!