Comment implémenter le survol de ligne dans Blazor wasm

Question

J'ai un composant de table Blazor qui change en fonction du nombre de lignes variables dans une collection :

        
        ≪/tr>
    ≪/tête>

    @foreach (élément var dans les éléments)
    {
        
            
            ≪/tr>
        
    }

    

            
Nom du projet
            
Description
            
Uploader
            
Date de téléchargement

                
@item.Name
                
@item.Description
                
@item.UserName
                
@item.UploadDate.ToString("jj-MM-aaaa")
                
Faire du travail
Ce que je dois faire est que, lorsque la souris survole une ligne,seulement cet élément spécifique de cette ligne devient activé. 
Par exemple, si ce tableau comporte 10 lignes (1-10), lorsque je survole la ligne 1, seul le bouton de la ligne 1 doit être visible et cliquable. Les autres boutons dont la ligne parent n'a pas de survol ne doivent pas être activés. 
Dans Blazor, comment puis-je activer uniquement les boutons  sur cette ligne spécifique lorsque je survole une ligne ? 

Answer 1

Comme mentionné dans les commentaires, il existe certaines raisons pour lesquelles vous ne souhaitez peut-être pas afficher les éléments enfants au survol de la souris : cela dépend de l'utilisation de la souris par l'utilisateur. Alternativement, la ligne entière peut être rendue cliquable, ce qui peut offrir une meilleure expérience utilisateur.

Par souci d'exhaustivité, voici comment résoudre le problème que j'ai posé :

Dans les pages Razor, ajoutez des sélecteurs d'identifiant CSS pour les balises HTML de ligne (parent) et de bouton (enfant) :

@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>
    }

Nous pouvons ensuite utiliser CSS pour appliquer des styles au bouton (enfant) au survol de la ligne (parent) :

#FileTableRowButton {
  visibility: hidden;
}

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

En fonction de votre cas d'utilisation, vous souhaiterez peut-être appliquer différents styles. Par exemple, utilisez display: none; au lieu de visibility: Hidden;