C'est probablement une chose très simple, mais je suis complètement nouveau à CSS. Je veux juste pouvoir avoir un effet de survol de la souris sur mes rangées dans GridView, en changeant la couleur de la ligne si elle est planifiée. Je suis curieux de savoir si mon fichier CSS est au bon endroit ou non? Si mon gridview.css soit dans le même dossier que mon gridview.aspx (je suppose donc?).
Voici mon fichier CSS:
et voici comment j'essaie de le mettre en œuvre:
Dans le fichier .aspx: et dans le code C # derrière: Je sais que je dois manquer quelque chose Vraiment simple dans mon c #. Toute aide serait appréciée! Merci!
10 Réponses :
Vous définissez d'abord le style de ligne à l'aide de ce code, à l'intérieur de la grilleview, je l'appelle alors vous utilisez ce CSS pour le faire changer couleur de fond, ou que vous aimez quand la souris se déplace. P> .row .row .row code> tr.row
{
background-color:#fff;
}
tr.row td
{
}
tr.row:hover td,
tr.row.over td
{
background-color: #eee;
}
Si j'avais l'habitude que le fichier CSS, l'ASPX et la partie C # soient-ils les mêmes?
@Kevin Non, vous utilisez uniquement ce code. Avez-vous l'essayer? J'utilise ce code quelques années maintenant et est facile, simple et fonctionnel.
Vous pouvez créer un effet de survol à l'aide de Rowcreated car cela nécessitera une publication pour cela. Vous devriez utiliser Hover pseudo-classe dans vous CSS. Quelque chose comme ça où la classe GridView CSS est appliquée à votre grilleview
C'est comme ça que j'ai fait dans mon projet
CSS: strong> p> défaut.aspx Page: strong> Cette page contient le contrôle de la grille de la grille. P> .tdonhover
{
Couleur de fond: # D9D9D9! important;
} code> p> <RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
Voici comment j'ai accompli ceci:
Suivez ce tutoriel pour modifier la ligne en surbrillance sur la sourisovée: p>
Ceci explique également le code pour traiter une sélection de ligne. My GridView a des couleurs en ligne alternées. Afin de restaurer la couleur d'origine de la ligne, vous venez de survoler, créez un attribut personnalisé dans la sourisover pour le fond de l'arrière-plan d'origine et la restauez sur Mouseout comme SO: P>
row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';"; row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";
C'est une chose si simple.
Ajoutez le CSS dans la partie de la tête ici au lieu de gvdevice Mettez votre identifiant GridView. < / p>
J'ai volé une partie de ma solution à ce sujet à partir d'un autre Réponse Donc, mon style affecte toutes les grilles dans une seule photo.
Ajouter ce CSSClass = "GridView" Code> à votre ASP: Tag GridView. P> table.GridView th {
border-bottom: 1px solid #ED7A0A;
text-decoration: none;
}
table.GridView tr:hover {
background-color: #fabf85;
}
meilleure façon dont YO peut gérer cette sourisover à l'aide d'OnRowCreated
protected void RowCreated_report(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='yellow'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
e.Row.Attributes.Add("style", "cursor:pointer;");
}
}
Je pense que j'ai la solution la plus courte et la plus facile à mettre en œuvre jusqu'à présent. Il n'est pas nécessaire d'éditer le code derrière ou des noms d'identité / de classe. Le seul changement que vous devez faire est d'ajouter ce CSS:
tr[class^='dxgvDataRow']:hover td{
background-color: #272727 !important;
}
protected void grdDis_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
#region to highlight the grid view row
e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
#endregion
}
}
Ceci est pour la colonne merci
Votre
gridview.css ne doit pas nécessairement être dans le même dossier que votregridview.aspx , tant que vous Référencez-la correctement dans votre fichier.aspx et assurez-vous qu'il est accessible au client (qui visitent votre site. ). De plus, vous devez ajouter le: plancher pseudo-classe sur votre CSS. Quelque chose comme.GridView tr.ighlight: plancher .