passage de la souris hover dans Gridview ASP.net à l'aide de CSS
C'est probablement une chose très simple, mais je suis complètement nouveau pour CSS. Je veux juste être en mesure d'avoir du passage de la souris hover effet sur mes lignes dans gridview, en changeant la couleur de la ligne si elle est survolé. Je suis curieux de savoir si oui ou non mon fichier CSS est dans le bon endroit? Mon Gridview.CSS dans le même dossier que mon gridview.aspx (je suppose?).
Voici mon fichier CSS:
.Gridview tr.normal
{
background-color:white;
}
.Gridview tr.highlight
{
background-color:yellow;
}
Et voici comment je suis en train de le mettre en œuvre:
Dans l' .fichier aspx:
<asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">
Et dans le code C# derrière:
protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "highlight";
}
}
Je sais que je dois être en manque de quelque chose de vraiment simple, dans mon C#. Toute aide serait appréciée! Merci!
Votre
Gridview.css
n'a pas à être dans le même dossier que votre gridview.aspx
, aussi longtemps que vous référence correctement dans votre .aspx
fichier, et assurez-vous qu'il est accessible pour le client (celui qui visite votre site). Aussi, vous devez ajouter le :hover
pseudo-classe CSS. Quelque chose comme .Gridview tr.highlight:hover
.OriginalL'auteur Kevin | 2012-08-13
Vous devez vous connecter pour publier un commentaire.
D'abord, vous définissez le style de Ligne à l'aide de ce code, à l'intérieur de la GridView, je l'appelle
.row
puis vous utilisez cette css pour faire changer la couleur d'arrière-plan, ou ce que jamais vous voulez, quand la souris est dessus.
L'astuce ici est que parce que GridView est rendu de la table, j'ai ajouter de la
td
et latr
dans le style de l'accès de la souris sur la table des lignes.Car il y a aussi l'alternative de style de ligne
AlternatingRowStyle
si vous souhaitez l'utiliser, vous pouvez simplement faire un plus de style, de la même manière.Non, vous n'utilisez ce code. Avez-vous l'essayer ? J'ai utiliser ce code quelques années maintenant, et c'est facile, simple et de travail.
OriginalL'auteur Aristos
Voici comment je l'ai accompli:
De suivre ce tutoriel pour changer la ligne en surbrillance sur la souris:
http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx
Ce qui explique aussi le code pour traiter une sélection de ligne. Mon gridview a la ligne alternant les couleurs. Afin de restaurer la couleur d'origine de la ligne que vous venez de plané, créer un attribut personnalisé dans l'infobulle de l'original backgroundColor et de le restaurer sur mouseOut comme suit:
OriginalL'auteur Brian
J'ai volé une partie de ma solution à ce à partir d'un autre réponse donc mon style affecte TOUS les gridviews d'un seul coup.
Ajouter cette
CssClass="GridView"
à votre asp:GridView tag.Puis dans votre style.css vous pouvez faire des choses comme la suivante:
La clé est la
:hover
pseudo-classe.OriginalL'auteur Malcont3nt
Vous pouvez créer sensitif effet à l'aide de RowCreated parce que cela va avoir besoin de publication pour cette. Vous devez utiliser hover pseudo-classe à l'intérieur de vous css. Quelque chose comme ceci
où Gridview classe css appliqué à votre Gridview
OriginalL'auteur vadim
C'est la façon dont je l'ai fait dans mon projet
CSS:
.tdonhover
{
background-color:#d9d9d9 !important;
}
Par défaut.page aspx : Cette page contient de contrôle gridview.
À l'aide de
vous pouvez spécifier d'autres arrière-plan des lignes de couleur et fontcolor
OriginalL'auteur Satinder singh
C'est donc quelque chose de simple.
ajouter le CSS dans la partie de la tête
ici au lieu de
gvDevice
mettre votre gridview id.OriginalL'auteur Ankitkumar Bhatt
Meilleure façon yo peut gérer ce passage de la souris à l'aide de OnRowCreated
OriginalL'auteur Vasanthakumar Ayyanar
Je crois que j'ai la plus courte et la solution la plus simple à mettre en œuvre jusqu'à présent. Il n'est pas nécessaire de modifier le code derrière ou l'id de la classe des noms. La seule modification que vous devez faire est de l'ajout de cette CSS:
OriginalL'auteur ErTR