<p>我有一个Blazor表格组件，根据一个集合的变量行数而变化：</p> <pre class="brush:php;toolbar:false;">&lt;table id="MyTable" class="table table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;项目名称&lt;/th&gt; &lt;th&gt;描述&lt;/th&gt; &lt;th&gt;上传者&lt;/th&gt; &lt;th&gt;上传日期&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; @foreach (var item in Items) { &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;@item.Name&lt;/th&gt; &lt;th&gt;@item.Description&lt;/th&gt; &lt;th&gt;@item.UserName&lt;/th&gt; &lt;th&gt;@item.UploadDate.ToString("dd-MM-yyyy")&lt;/th&gt; &lt;th&gt;&lt;button type="button" class="btn btn-primary" @onclick="() =&gt; DoSomething()"&gt;Do Work&lt;/button&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/tbody&gt; } &lt;/table&gt;</pre> <p>我需要做的是，当鼠标悬停在某行上时，<em>只有</em>该行的特定元素才能启用。</p> <p>例如，如果这个表格有10行（1-10），当我悬停在第1行时，只有第1行的按钮才应该可见和可点击。其他按钮，其父行没有悬停，不应该启用。</p> <p>在Blazor中，如何在悬停在某行上时，仅启用<em>该特定行上的按钮</em>？</p>

@foreach (var item in Items)
    {
        <tbody>
            <tr id="FileTableRow">
                <th>@item.Name</th>
                <th>@item.Description</th>
                <th>@item.UserName</th>
                <th>@item.UploadDate.ToString("dd-MM-yyyy")</th>
                <th><button id="FileTableRowButton" type="button" class="btn btn-primary" @onclick="() => DoSomething()">Do Work</button></th>
            </tr>
        </tbody>
    }

#FileTableRowButton {
  visibility: hidden;
}

#FileTableRow {
  &:hover {
    #FileTableRowButton {
      visibility: visible;
    }
  }
}